Got 5 images in a row inside of the wrapper which width is 1200px, every pic has some padding and margin set as well as their parent div. Every picture is 200px wide with some padding included and first 4 pics got margin-right of 45px. Parent div got 10px margin on each side. Combined numbers make 1200px , why is my last picture going into next row? You can't see the pictures because they are locally stored, but while inspecting I get that every pic is 200px wide, so paddings are correctly set for each one of them. Appriciate any help.
<style>
.wrapper {
width:1200px;
margin:0 auto;
}
#partneri{
margin:60px 10px 0 10px;
}
#partneri img{
margin-right:45px;
}
#partneri img:first-of-type{
padding:0 25.5px 0 25.5px;
}
#partneri img:nth-of-type(2){
margin-bottom: 8px;
}
#partneri img:nth-of-type(3){
padding:0 46px 0 46px;
}
#partneri img:nth-of-type(4){
padding:0 20px 0 20px;
}
#partneri img:last-of-type{
padding:0 15px 0 15px;
margin-right:0;
margin-bottom: 30px;
}
</style>
<div class="wrapper">
<article id="partneri">
<img src="slike/Framesi.png" alt="Framesi">
<img src="slike/medavita.png" alt="medavita">
<img src="slike/keune.png" alt="keune">
<img src="slike/macadamia.png" alt="macadamia">
<img src="slike/subrina.png" alt="subrina">
</article>
</div>
