Change layout based on screen size

Question

I would like the content of my website header to occupy 100% of the screen width on regular-sized desktops/laptops, but to be centered on larger displays. By \"larger displays\"

Answer 1

Try out setting media screen and limitation through min-width. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (min-width: 1200px) {
      .container {
          width: 100%;
      }
  }

@media screen and (min-width: 1920px) {
      .container {
          width: 500px;
      }
  }