Я не знаю, как заставить это окно отображаться горизонтально

Question

Я несколько раз пытался сделать это поле, в котором есть теги img, h1, p для горизонтального отображения. Я установил ширину 30%, чтобы сделать его отзывчивым, но он не работал

вот мой код:

/* BOXES */

#boxes {
  margin-top: 20px;
}

#boxes .box {
  float: left;
  width: 30%;
  text-align: center;
  padding: 10px;
}

#boxes .box img {
  width: 90px;
}

<section>
  <div id="boxes">
    <div class="container">
      <div class="box">
        <img src="./img/logo_html.png" alt="Html5">
        <h3>HTML5 Markup</h3>
        <p> blah blah </p>
        <img src="./img/logo_css.png" alt="Css3">
        <h3>Styling CSS</h3>
        <p>blah blah </p>
        <img src="./img/logo_brush.png" alt="Graphic Design">
        <h3>Graphic Design</h3>
        <p>blah blah </p>
      </div>
    </div>
  </div>
</section>

Answer 1

У вас есть только один блок div - вам нужно обернуть каждый набор элементов в его собственный блок.Кроме того, вместо использования float (css перешел от необходимости плавать, поскольку он фактически не был создан для того, за что его злоупотребляют), я бы использовал flex-box:

/* BOXES */

#boxes {
  margin-top: 20px;
}

#boxes .container {
  display:flex;                   /* make the container flex */
  flex-direction:row;             /* align the children in a row */
  justify-content:space-between;  /* space them out equally */
}

#boxes .box {                     /* remove the float from this */
  width: 30%;
  text-align: center;
  padding: 10px;
}

#boxes .box img {
  width: 90px;
}

<section>
  <div id="boxes">
    <div class="container">
      <div class="box">
        <img src="./img/logo_html.png" alt="Html5">
        <h3>HTML5 Markup</h3>
        <p> blah blah </p>
      </div>
      <div class="box">
        <img src="./img/logo_css.png" alt="Css3">
        <h3>Styling CSS</h3>
        <p>blah blah </p>
      </div>
      <div class="box">
        <img src="./img/logo_brush.png" alt="Graphic Design">
        <h3>Graphic Design</h3>
        <p>blah blah </p>
      </div>
    </div>
  </div>
</section>

Дополнительная информация о flexbox (приемы CSS)

MDN Основные понятия Flexbox