Float based grid system rendering outside viewport - html

Question

I set out to create a float based grid system and have added gutters between columns via padding: 0 0.75em; applied to columns with margin-right: -0.75em; and margin-left: -0.75; applied to rows.
When I have a full width container it renders outside the width of the viewport with the horizontal scrollbarr showing.
I want the leftmost and the rightmost element to stick along the edges of the viewport, but still want to preserve the gutters between elements. I must be missing something. Any help would be appreciated, thank you!
Here's CSS followed by HTML:
.container-full {
width: 100%;
}
.row {
margin-right: -0.75em;
margin-left: -0.75em;
}
.row::before,
.row::after {
display: block;
content: "";
clear: both;
}
[class*="column-"] {
float: left;
padding-right: 0.75em;
padding-left: 0.75em;
}
<div class="container-full">
<div class="row">
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img01.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img02.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img03.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img04.jpg" alt="Image">
</div>
</div>
</div>
</div>

Answer 1

You can achieve this via using CSS Grid and the grid-gap property.
<div class="container">
<img src="https://picsum.photos/1920/1080" alt="">
<img src="https://picsum.photos/1920/1081" alt="">
<img src="https://picsum.photos/1920/1082" alt="">
<img src="https://picsum.photos/1920/1083" alt="">
</div>
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 0.75rem;
}
img {
max-width: 100%;
height: 100%;
object-fit: cover;
}