Is there a way to remove the padding around the container and between the two columns?
I attempted setting margin and padding to 0, but it was not successful.
https://i.sstatic.net/i5XJJ.jpg
body,
html {
width: 100%;
height: 100%;
}
main {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100%;
}
.flexbox img {
width: 100%;
height: auto;
}
@media all and (max-width: 650px) {
.flexbox {
width: 100%;
}
}
@media all and (min-width: 651px) {
.col-1,
.col-2 {
width: 50%;
}
.col-3 {
width: 100%;
}
}<main id="container">
<div class="flexbox col-1">
<img src="http://placehold.it/800x400/f00/000?text=1" />
</div>
<div class="flexbox col-2">
<img src="http://placehold.it/800x400/0f0/000?text=2" />
</div>
<div class="flexbox col-3">
<img src="http://placehold.it/800x400/06f/000?text=3" />
</div>
</main>I appreciate any help you can provide!