Float based grid system rendering outside viewport

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>