title: Correct way to add padding to Bootstrap body to prevent content and header overlap
body: <p>I understand that to stop the main container in Bootstrap from being at the top of the body, and behind the nav bar, you must add padding like so:</p>
  
  <pre><code>&lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
      &lt;style&gt;
        body {
          padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
      &lt;/style&gt;
  &lt;link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>The padding must be declared between the bootstrap.css and the bootstrap-responsive.css in order for the padding not to cause issues on smaller devices and thus breaking the responsiveness of the site.</p>
  
  <hr>
  
  <h2>My Question:</h2>
  
  <p>I'm using the combinde bootstrap.css file down loaded from <a href="http://twitter.github.com/bootstrap/customize.html" rel="noreferrer">Bootstrap customize</a>, which has the responsive and the normal css combined into one file. </p>
  
  <p>Because they are combined into one file it means I can't use the solution I described at the beginning of this question without actually adding the fix into the bootstrap.css file (I don't want to add it in there, long story).</p>
  
  <p>So I was thinking instead of putting this code (with a @media fix for smaller devices):</p>
  
  <pre><code>body {  padding-top: 60px; } 
  @media (max-width: 979px) { body { padding-top: 0;  } }
  </code></pre>
  
  <p>into my own css file (main.css) and including it after the bootstrap.css, in the html, like so:</p>
  
  <pre><code>&lt;link href="css/bootstrap.css" rel="stylesheet" media="screen"&gt;
  &lt;link href="css/main.css" rel="stylesheet" media="screen"&gt;
  </code></pre>
  
  <p><br>
  <strong>Do you think this solution is acceptable?</strong></p>