Why are the boxes not aligned correctly? - html

Question

The top boxes are leaving extra space on the left for some reason but i'm not sure why. I would really appreciate your help.
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: The picture shows that the black box isn't aligned with the red box
.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

You miss the "div" tag
<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>
Try this.

Answer 2

Since the floated element widths exceed the total available width, the last element is pushed to the next line. Try using flex or grid. Please find the snippet usinggrid
.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>