как сделать адаптивную верстку?

[gordy]

Как сделать адаптивные блоки и контент страницу чтоб был максимальный размер экрана 1200px

прописал так

<div class="content-container">
        тут левый блок
<section class="main">
        <div class="layout-container">
        тут центр страницы
    </div><!-- .content /-->
</section> <!-- .main -->
тут правый блок
</div><!-- layout-container -->
</div><!-- content-container -->

css

@media all and (min-width: 50em) {
.sidebar {
    display: block;
    margin: 0;
    width: 22%;
  }
  .sidebar .inner {
    padding: 0;
    margin: 0;
    border: none;
  }
  .sidebar .widget {
    width: 100%;
    float: none;
  }
  .sidebar .widget:nth-child(odd) {
    margin-right: 0;
  }
  .sidebar-left {
    margin-right: 3%;
    padding-left: 0;
    float: left;
  }
  .sidebar-left:before {
    display: none;
  }
  .sidebar-left ~ .main {
    margin-left: 0;
  }
  .sidebar-right {
    margin-right: 3%;
    padding-right: 0;
    float: right;
  }
.content-container {
    position: relative;
  }
  .content-container:before, .content-container:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #DCDCDC;
  }
  .content-container:before {
    left: 25%;
    right: auto;
  }
  .content-container:after {
    right: 25%;
    left: auto;
  }
  .layout-container {
    display: block;
    position: relative;
    min-height: calc(100vh - 430px);
  }
  .layout-container:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  .main {
    display: block;
    position: relative;
    width: 50%;
    float: left;
    padding: 0 2.778% 1.5em;
    margin-left: 25%;
    /* margin-left added in case left-sidebar has no widgets.
    ** This is a real possibility for a fresh install. */
  }

оговорюсь если тупо прописать @media all and (max-width: 1200px) { это не поможет....