Почему ящики не выровнены правильно?

Question

По каким-то причинам верхние ящики оставляют дополнительное пространство слева, но я не уверен почему.Буду очень признателен за вашу помощь.

HTML:

  <section class="proj-box">
       <div class="wrapper">
         <div class="thumb" id="Dthumb">
           <a href="Dough.html">
             <img src="Doughblack.png" alt="screen mockups of Dough app">
           </a>
         <h3 id="Dtitle">Dough - Your new financial companion</h3>
       </div>
       <div class="thumb" id="Fthumb">
         <a href="Flyte.html">
           <img src="flytebig.png" alt="screen mockups of Flyte app">
         </a>
         <h3 id="Ftitle">Flyte - Flight Search App</h3>
       </div>
       <div class="thumb" id="Othumb">
         <a href="OrderUp.html">
           <img src="OrderUpred.png" alt="screen mockups of OrderUp app">
         </a>
         <h3 id="Otitle">OrderUp - Food Delivery App</h3>
       </div>
     </div>
   </section>

CSS: На рисунке показано, что черный ящик не совпадает с красным прямоугольником

.proj-box .thumb {
  width: 380px;
  height: 380px;
  float: left;
  margin: 20px 20px 0;
}
.proj-box img {
  width: 380px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.proj-box img:hover {
  box-shadow: 0 0 2px 1px #D89E9E;
}

Answer 1

Вам не хватает тега "div"

<section class="proj-box">
   <div class="wrapper">
     <div class="thumb" id="Dthumb">
       <a href="Dough.html">
         <img src="Doughblack.png" alt="screen mockups of Dough app">
       </a>
       <h3 id="Dtitle">Dough - Your new financial companion</h3>
     </div>
     <div class="thumb" id="Fthumb">
       <a href="Flyte.html">
         <img src="flytebig.png" alt="screen mockups of Flyte app">
       </a>
       <h3 id="Ftitle">Flyte - Flight Search App</h3>
     </div>
     <div class="thumb" id="Othumb">
       <a href="OrderUp.html">
         <img src="OrderUpred.png" alt="screen mockups of OrderUp app">
       </a>
       <h3 id="Otitle">OrderUp - Food Delivery App</h3>
     </div>
   </div>
 </div>

Попробуйте это.

Answer 2

Поскольку ширина плавающего элемента превышает общую доступную ширину, последний элемент переносится на следующую строку.Попробуйте использовать flex или grid.Пожалуйста, найдите фрагмент, используя grid

.proj-box .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}

.proj-box .thumb {}

.proj-box img {
  width: 380px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.proj-box img:hover {
  box-shadow: 0 0 2px 1px #D89E9E;
}

<section class="proj-box">
  <div class="wrapper">
    <div class="thumb" id="Dthumb">
      <a href="Dough.html">
        <img src="Doughblack.png" alt="screen mockups of Dough app">
      </a>
      <h3 id="Dtitle">Dough - Your new financial companion</h3>
    </div>
    <div class="thumb" id="Fthumb">
      <a href="Flyte.html">
        <img src="flytebig.png" alt="screen mockups of Flyte app">
      </a>
      <h3 id="Ftitle">Flyte - Flight Search App</h3>
    </div>
    <div class="thumb" id="Othumb">
      <a href="OrderUp.html">
        <img src="OrderUpred.png" alt="screen mockups of OrderUp app">
      </a>
      <h3 id="Otitle">OrderUp - Food Delivery App</h3>
    </div>
  </div>
</section>