Float based grid system rendering outside viewport-CodePudding

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>

CodePudding user response：

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;
}