html {

  box-sizing: border-box;

}

*, *:before, *:after {

  box-sizing: inherit;

}

​

body{

  margin:0;

  height: 300px;

}

​

div{

  padding: 0 10px;

  margin: 0 auto;

  background: aqua;

  width: 980px;

  border: 1px solid black;

  height: 100%;

}

​

/* Large desktop */

@media (min-width: 1200px) {

  div{

    background: red;

    width: 1200px;

  }

}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px) {

  div{

    background: yellow;

    width: 768px;

  }

}

/* Landscape phone to portrait tablet */

@media (max-width: 767px) {

  div{

    background: blue;

    width: 100%;

  }

}

/* Landscape phones and down */

@media (max-width: 480px) {

  div{

    background: green;

  }

}