Mobile first layout styling.css

/* default styling for small screens */
body, header, .main, footer {
  margin: 0 auto;
}

/* media queries */
@media screen and ( min-width: 401px ) {
  footer.widget-area {
    width: 49%;
    margin-right: 2%;
  }
  footer .widget-area.second,
  footer .widget-area.fourth {
    margin-right: 0;
  }
}

@media screen and ( min-width: 701px ) {
  body, header, .main, footer {
    width: 96%;
    max-width: 1200px;
  }
  .content {
    width: 60%;
    float: left;
    margin-right: 5%;
  }
  .sidebar {
    width: 35%;
    float: right;
    clear: left
  }
  .footer .widget-area {
    width: 23.5%;
    float: left;
    margin-right: 2%;
  }
  .footer .widget-area.fourth {
    margin-right: 0;
  }
}