CSS плавает: почему мой логотип не плавает слева от текста?

Question

Абсолютный новичок здесь, изучающий HTML и CSS (пока нет grid и flexbox). Я пытаюсь сделать раздел с двумя горизонтальными блоками, состоящими из изображения / значка слева и текста справа. Очень просто, но я почему-то не могу заставить значок плавать слева от текста. Он застрял на линии ниже. Что я делаю неправильно? или что мне добавить?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  margin: auto;
  max-width: 1100px;
  overflow: auto;
  padding: 50px;
}

#strengths {
  height: 600px;
  margin: auto;
  Display: block;
  background-image: url('./img/mountain-lake.jpg');
  background-size: cover;
}

#strengths .primary {
  background-color: #ccc7f2;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  opacity: 0.75;
  line-height: 1.4em;
}

#strengths .primary i {
  float: left;
  margin-right: 20px;
  display: inline;
}

<section id="strengths" class="py-3">
  <div class="container">
    <h2 class="main-heading">My Strengths</h2>
    <div class="primary">
      <h3 class="sub-heading">Strategic Thinking</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
        qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
      <i class="fas fa-chess-pawn fa-3x"></i>
    </div>
    <br><br>
    <div class="primary">
      <h3 class="sub-heading">Analysis</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
        qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
      <i class="far fa-play-circle fa-3x"></i>
    </div>
  </div>
</section>

Answer 1

Плохая идея использовать float. Я предлагаю вам взглянуть на flexbox как можно скорее.

Но если вы действительно хотите его использовать, вам следует немного изменить HTML.

Подумайте об этом так. Вы хотите, чтобы значок был «столбцом», а заголовок вместе с текстом - другим столбцом.

Лучший способ добиться этого - заключить текст и заголовок в элемент HTML (наиболее вероятно, в div)

Затем вы должны указать width, используемый внутри их родителя .primary. Так, например, значок имеет 5%, а заголовок и текст 95% - 20 пикселей, что является полем значка.

Также добавьте float:left к primary div. Потому что добавление float:left к элементу (значку и тексту) выводит этот элемент из обычного потока документа. (аналогично позиции: фиксированная / абсолютная) и поэтому, чтобы они оставались «частью» div primary, вам также необходимо добавить float:left к этому div.

См. ниже

 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }

 .container {
   margin: auto;
   max-width: 1100px;
   overflow: auto;
   padding: 50px;
 }

 #strengths {
   height: 600px;
   margin: auto;
   Display: block;
   background-image: url('./img/mountain-lake.jpg');
   background-size: cover;
 }

 #strengths .primary {
   background-color: #ccc7f2;
   padding: 20px;
   margin: 20px;
   border-radius: 10px;
   opacity: 0.75;
   line-height: 1.4em;
   float:left;
   width:100%;
 }

 #strengths .primary i {
   float: left;
   margin-right: 20px;
   display: inline;
   width:5%;
 }
  #strengths .primary .wrapper {
    float:right;
    width: calc(95% - 20px);
    }

<section id="strengths" class="py-3">
  <div class="container">
    <h2 class="main-heading">My Strengths</h2>
    <div class="primary">
      <div class="wrapper">
        <h3 class="sub-heading">Strategic Thinking</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
      </div>
      <i class="fas fa-chess-pawn fa-3x">icon</i>
    </div>
    <br><br>
    <div class="primary">
      <div class="wrapper">
        <h3 class="sub-heading">Analysis</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
        </div>
      <i class="far fa-play-circle fa-3x">icon</i>
    </div>
  </div>
</section>