Chcę ustawić w jednym wierszu 3 obrazki tak, aby przylegały do siebie i skalowały się proporcjonalnie wraz ze zmianą szerokości strony. Niestety między obrazkami są odstępy, których nie potrafię usunąć.
<div class="container">
<div class="over"></div>
<div class="content">
<div class="ins">
<img src="img1.png">
</div>
<div class="ins">
<img src="img2.png">
</div>
<div class="ins">
<img src="img3.png">
</div>
</div>
<div class="over"></div>
</div>
.container{
margin: 0px auto;
outline: 2px dotted gray;
width: 80%;
}
.over{
display: block;
height: 200px;
}
.content{
display: block;
outline: 2px solid green;
width: 100%;
}
.ins{
display: inline-block;
margin: 0px;
padding: 0px;
width: 33%;
}
img{
width: 100%;
height: auto;
display: block;
margin: 0px;
padding: 0px;
}
Jak to naprawić?