Align div horizontally using simple CSS

align div horizontally and responsive

by Saranya Rajendran

HTML

<div class="main">
  <div class="first">  
  First Div
  </div>
  <div class="second">  
  Second Div
  </div>
  <div class="third">  
  Third Div
  </div>
  <div class="clear">  
  </div>
</div>

CSS

.main{
  width:1000px;  
  }
  .first{
   width:200px;
   height:100px;
   background:#CCC;
   float:left;
   }
  
  .second{
   width:200px;
   height:100px;
   background:green;
   float:left;
   }
   
   .third{
   width:200px;
   height:100px;
   background:red;
   float:left;
   }
   
   .clear{
     clear:both;
   }