How do I center my image gallery on a page? - html

Question

I am trying to create an image gallery using HTML and CSS but I have some trouble making the gallery appear in the middle of the page. As of now the images (grey boxes in picture) are to far to the left. I would like the whole gallery to be centered on the page.
Any help with this would be much appreciated!
Screenshot
#content {
overflow: auto;
margin-top: 30px;
margin-bottom: 30px;
background-color: #6b88f2;
}
.gallery {
min-height: calc(100vh - 200px);
margin: 0 auto;
max-width: 1200px;
padding: 0 1rem;
background-color: #ec6e52;
}
.cell {
margin: 0.5rem;
}
.cell img {
display: block;
}
.responsive-image {
max-width: 100%;
}
#media screen and (min-width: 600px) {
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell {
width: calc(50% - 5rem);
}
}
#media screen and (min-width: 1000px) {
.cell {
width: calc(33.3333% - 5rem);
}
}
<div id="content">
<div class="gallery">
<div class="grid">
<div class="cell">
<img src="bilder/test.png" alt="OS" class="responsive-image">
</div>
<!--End cell -->
<div class="cell">
<img src="bilder/test.png" alt="OS" class="responsive-image">
</div>
<!--End cell -->
<div class="cell">
<img src="bilder/test.png" alt="OS" class="responsive-image">
</div>
<!--End cell -->
<div class="cell">
<img src="bilder/test.png" alt="OS" class="responsive-image">
</div>
<!--End cell -->
<div class="cell">
<img src="bilder/test.png" alt="OS" class="responsive-image">
</div>
<!--End cell -->
<div class="cell">
<img src="bilder/test.png" alt="OS" class="responsive-image">
</div>
<!--End cell -->
</div>
<!--End grid -->
</div>
<!--End gallery -->
</div>
<!--End content -->

Answer 1

I would just put text-align: center on .grid, knowing that it will trickle down
Or you can use flexbox which will give you an easier time overall:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}