.box-layout
{
    width: 1200px;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
body{background-color: #ccc;}
section
{
    background-color: #fff;
}
.navbar-fixed-top, .navbar-fixed-bottom
{
    width: 1200px !important; 
    left: auto !important;
    right: auto !important;
}


@media (min-width: 320px) and (max-width:650px)
{
    .box-layout
    {
        width: auto !important;
    }
    .navbar-fixed-top, .navbar-fixed-bottom
    {
        width: 100% !important;
    }
}




@media (min-width: 650px)
{
    .box-layout
    {
        width: 600px !important;
    }
    .navbar-fixed-top, .navbar-fixed-bottom
    {
        width: 600px !important;
    }

}




@media (min-width: 768px)
{
  .box-layout
  {
    width: 750px !important;
  }
  .navbar-fixed-top, .navbar-fixed-bottom
  {
    width: 750px !important; 
  }
  
}

@media (min-width: 980px)
{
  .box-layout{
    width: 950px !important;
  }
  .navbar-fixed-top, .navbar-fixed-bottom
  {
    width: 950px !important; 
  }
}

@media (min-width: 1200px)
{
  .box-layout
  {
    width: 1170px !important;
  }
  .navbar-fixed-top, .navbar-fixed-bottom
  {
    width: 1170px !important ; 
  }
}