Unaligned images with text underneath? CSS / HTML - html

Question

unaligned images and text
I have attempted to input suggestions from previous questions but it just seems I have been able to successfully find the correct way to align these images with their text underneath.
<section id="boxes">
<div class="container">
<div class="box">
<img src="./images/dayporter2.jpeg">
<h3>DAYPORT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<img src="./images/floorcare1.jpeg">
<div class="box">
<h3>FLOOR CARE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box">
<img src="./images/janitor2.jpeg">
</div>
</section>
/* boxes */
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .box img{
width: 90px;
}`

Answer 1

You seem to have an unnecessary div tag.
remove the div tag after your 'floorcare1.jpeg' img, here:
<img src="./images/floorcare1.jpeg">
<div class="box"> //remove this

Answer 2

<div class="box">
<img src="./images/floorcare1.jpeg">
<div class="box"> <!-- The probleme is here -->
<h3>FLOOR CARE</h3>
Because the .box element which is direct below the image is float left, it will force the image to be float left, because their sibling .box take 30% of the parent and there are remaining 70% width of their .box parent element. You must remove the .box element and every thing will work like you expecting.
Another problem you must close all you open markup
<section>
<div class="container">
<div class="box">
<!-- First box -->
</div>
<div class="box">
<!-- Second box -->
</div>
<div class="box">
<!-- Third box -->
</div>
</div>
</section>