title: Max-width on mobile (full-width div)
body: <p>I have a blue bar that runs along the top of my page that fills the full width of the screen, however, I can't get it to stick to a max-width. </p>
  
  <p>On mobile it renders with an enormous amount of extra spacing on the right-hand side.</p>
  
  <p>Any ideas?</p>
  
  <p>You can see the code and CSS in action here:
  <a href="http://jsfiddle.net/DavidMichaelangelo/4vj0gfp1/1/" rel="nofollow">http://jsfiddle.net/DavidMichaelangelo/4vj0gfp1/1/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
                  &lt;div id="main-logo" class="clearfix"&gt;
                  &lt;div style="height: 26px; width: 174px; background-color: #000; color: #FFF;"&gt;Placeholder&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="blue-line-headline clearfix"&gt;
                  &lt;div class="blue-line-content clearfix"&gt;
                      &lt;span style="font-size:1.25em;"&gt;Open an Account and&lt;/span&gt;&lt;br /&gt;
                      &lt;span style="font-size:3em; font-weight: bold;"&gt;Save XX% for X months*&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.blue-line-headline {box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 15; color: #fff; width:100%; background-color:#1C3F94; padding: 0.5em 400%; margin: 0 -400%; max-width: 1100px;  display: block;}
  .blue-line-content {padding: 0px 0px 0px 20px; margin: auto; width: 100%; position: relative; display: block;}
  #main-logo {padding: 20px 0px 20px 20px;}
  </code></pre>