How can i get spaces between images with the same class? - html

Question

How can I get a 2 by 2 layout for my images instead of a single images stacking through webpage with CSS, if possible i would like a method that does not require javascript as i have no knowledge or experience in regards to it. For some reason in when i run this code using the snippet it shows me the 2 by 2 layout i would like to have but this isn't the case when i try running my code on e.g. chrome.
.box {
cursor: pointer;
height: 281px;
position: relative;
overflow: hidden;
width: 500px;
margin-left:150px;
display: inline-block;
margin-bottom: 35px;
float:left;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: #304562;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 500px;
height: 281px;
padding: 130px 20px;
}
.box:hover .overbox { opacity: 1; }
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box .title {
font-size: 20px;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.box:hover .title,
.box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.box .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}
.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
</div>
<div class="box"> <img src="../images/Ferrari2.jpg" >
<div class="overbox">
<div class="title overtext">Ferrari 458 Italia Spider</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
</div>
<div class="box"> <img src="../images/Italia.jpg">
<div class="overbox">
<div class="title overtext">Ferrari 458 Italia</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
</div>
<div class="box"> <img src="../images/R35-2.jpg">
<div class="overbox">
<div class="title overtext">Nissan R35 GTR</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
<div class="box"> <img src="../images/P1.jpg">
<div class="overbox">
<div class="title overtext">Mclaren P1</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
<div class="box"> <img src="../images/GT3.jpg">
<div class="overbox">
<div class="title overtext">Porsche GT3 </div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>
<div class="box"> <img src="../images/R8-2.jpg">
<div class="overbox">
<div class="title overtext">Audi R8</div>
<div class="tagline overtext">SPECS:</div>
</div>
</div>

Answer 1

In HTML you can simply add the br attribute. This will allow you to add a line break with the images. A better way of doing it is by making the image 100% in width to the parent class.