Bootstrap: v3.3.7 Need help to understand full width background colour issues
<p>Firstly hello.</p>

<p>I have no problem using Bootstrap with full width header background colours on larger devices, container-fluid sorts that out for me however what i am trying to achieve is that on resize down to smaller screen sizes (ie &lt;768) that the full-width background is no longer full width and will have a left and right margin/gutter at the viewport edges.</p>

<p>For example:</p>

<pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
     &lt;div class="col-md-12 col-xs-12"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Gives a full width header across all screen sizes.</p>

<p>however:</p>

<pre><code>&lt;div class="container"&gt;
   &lt;div class="row"&gt;
      &lt;div class="col-md-12 col-xs-12"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Gives a centered header with a margin either side on larger viewports (which is what i want for small screens only) but when i resize viewport down the header becomes full width of the viewport.</p>

<p>What is the correct way to go about this?.. could i put a container inside another container and by using css and a media query change the background colour of the main container (ie: white) so that my inner-container (background-color black) would then be left and right margined/gutter. Maybe this is over engineering this issue or not even be semantic and someone can give me more insight,</p>

<p>Many Thanks</p>