JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Zonder margin</h2>

<div class="container">
    <div>
        <img src="http://www.radio2.nl/image/rm/35107.jpg" />
    </div>
    
    <div>
        <img src="http://www.radio2.nl/image/rm/35107.jpg" />
    </div>
    
    <div>
        <img src="http://www.radio2.nl/image/rm/35107.jpg" />
    </div>
</div>

<h2>Met margin</h2>

<div class="container margin">
    
    <div>
        <span>
            <img src="http://www.radio2.nl/image/rm/35107.jpg" />
        </span>
    </div>
    
    <div>
        <span>
            <img src="http://www.radio2.nl/image/rm/35107.jpg" />
        </span>
    </div>
    
    <div>
        <span>
            <img src="http://www.radio2.nl/image/rm/35107.jpg" />
        </span>
    </div>
    
</div>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: Arial;
}

h2 {
    clear: both;
}

.container {
    width: 100%;
}

.container div {
    width: 33.3%;   
    float: left;
}

.container div img { 
    width: 100%;
    height: auto;
}

/* Met margin */
.container.margin {
    width: 101.5%;
    margin-left: -1.5%;
}

.container div span { 
    margin-left: 3%;
    float: left;
}

/* Responsive stuk hieronder */
@media screen and (max-width: 640px) {
    .container div { 
        width: 100%;
    }
}