Currently, I am in the process of transforming a 960grid 12col responsive design into HTML. There are three separate div elements, each with a width of 300px and a margin-right of 20px. Below is the code snippet that illustrates this:
HTML
<section class="container">
<h1>Services</h1>
<div class="box">
box1
</div>
<div class="box">
box2
</div>
<div class="box last">
box3
</div>
</section>CSS
.container{
max-width: 960px;
width: 98%;
margin: 0 auto;
padding: 0 1.04166666666667%;/*10px / 960px*/
}
.box{
width: 31.25%;/*300px / 960px*/
margin-right: 6.66666666666667%;/*20px / 300px*/
float: left;
background: red;
margin-bottom: 10px;
}
.last{
margin-right: 0;
}I'm facing an issue where the div element with the "box" class does not completely fit inside the container div. As a result, the last div breaks the line and appears below the other two div elements. You can view the problem here. I am uncertain about where I may have made an error in my implementation.