CodePen

HTML

            
              <body>
	<div id="container">
		<div class="footer">
		
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
			
		</div>
	</div>
</body>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              *:after {
	content: "";
	display:table;
	clear: both;
}
body {
	background: #28292A;
	height: 600px;
}

#container {
	width: 1200px;
	margin: 0px auto;
	min-height: 60px;
}
.footer {
	padding-top: 2%;
  background: #003E87;
}
.box {
	float: left;
	margin-left: 2.4%;
	min-height: 60px; 
	background: #fff;
	margin-bottom: 2%;
}

/* You can simply apply a class like you did before, i just felt like being different */

.box:nth-of-type(1) { width:36.3% }
.box:nth-of-type(2) { width:27%   }
.box:nth-of-type(3) { width:27%   }
.box:nth-of-type(4) { width:27%   }
.box:nth-of-type(5) { width:36.3% }
.box:nth-of-type(6) { width:27%   }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................