Aligning multiple boxes on CSS - html

Question

I'm struggling to align a group of boxes in the center of my webpage when displayed on a computer screen. I'm floating the boxes left but then it's assymetrical with more space on the right. It's currently looking like this:
! https://imgur.com/a/wq0yv6S
I tried a few different alignment properties to the "boxes" and "box" classes but they didn't accomplish anything.
HTML of the section + first box and CSS:
#boxes {
margin-top: 20px;
}
#boxes .box {
float: left;
width: 20%;
padding: 10px;
text-align: center;
align-self: center;
justify-content: space-around;
}
#boxes .box img {
width: 200px;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./img/foto0.jpg">
<h2>Pessoa Fisica</h2>
<p>Cuidamos da sua declaracao de imposto de renda</p>
</div>
I'd like to have those boxes positioned symmetrically.

Answer 1

You can use display: grid;
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.grid-item {
background: #F7F7F7;
padding: 1em;
text-align: center;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>

Answer 2

You could use flexbox,
it's very easy to start with,
you need to implement this CSS code to the parent container which you need its children to be aligned in someway
.container{
display: flex;
justify-content: center;
align-items: center;
}
<section id="boxes">
<div class="container">
<div class="box">
<img src="./img/foto0.jpg">
<h2>Pessoa Fisica</h2>
<p>Cuidamos da sua declaracao de imposto de renda</p>
</div>

Answer 3

What you're trying to achieve is not too hard with flexbox. See the following demo for an example. If you have any questions please ask :).
Note: The .site div is not needed but added for reference.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 960px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.box {
position: relative;
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.site {
border: 1px solid red;
}
img {
max-width: 100%;
height: auto;
}
<div class="site">
<div class="container">
<div class="row">
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
<div class="box">
<img src="https://dummyimage.com/300x200/f9f9f9/aaa" alt="">
<h2>Title #1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui purus, porta sit amet elit ut, pretium dapibus ante. Suspendisse non pharetra odio. Mauris ac placerat libero.</p>
</div>
</div>
</div>
</div>