<!-- responsive tutorial --> <section id="proj"> <div class="proj--ext_wrapper"> <div class="proj--inner_wrapper"> <div class="proj--title">Project Title </div> <div class="proj--desc">This is all about project title</div> <div class="proj--btn-wrapper"> <a href="#" class="proj--btn">Learn More</a> <a href="#" class="proj--btn">Learn More</a> </div> </div> </div> </section> <section id="proj2"> <div class="proj--ext_wrapper"> <div class="proj--inner_wrapper"> <div>Project Title 2</div> <div>Project desc</div> <div class="box-wrapper"> <div class="box"> <img src="http://placehold.it/100x100"> <div>box desc</div> </div> <div class="box"> <img src="http://placehold.it/100x100"> <div>box desc</div> </div> <div class="box"> <img src="http://placehold.it/100x100"> <div>box desc</div> </div> <div class="box"> <img src="http://placehold.it/100x100"> <div>box desc</div> </div> </div> <div class="spacer"></div> </div> <div> </section>

div { border :1px; border-style: solid; border-color: #0000ff; } section{ border :1px; border-style: solid; border-color: red; } body, html{ margin:0px; padding:0px; font-family: arial; } .proj--ext_wrapper{ background-color:red; } .proj--inner_wrapper{ margin: auto; max-width: 960px; background-color:lightblue; } .proj--title{ text-align:center; font-size:30px } .proj--desc{ text-align:center; margin: 10px 0px 14px 0px; } .proj--btn-wrapper{ text-align:center; } .proj--btn{ border-color: green; background-color:green; padding:10px; margin:1px; } .box-wrapper{ } .spacer{ clear:both; } .box-wrapper{ margin:auto; max-width:500px; } .box{ float:left; margin:10px; width:100px; height: 124px; }