title: can't get rid of gap between header and body
body: <p>I have tried everything from editing padding/margins to saving file as utf-8 without BOM in notepad suggested in other posts to get his gap to go away. Nothing is seems to work so I come to ask for help.</p>
  
  <p><a href="https://i.stack.imgur.com/CFXws.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CFXws.png" alt="enter image description here"></a></p>
  
  <p>I am developing this webpage using python/django framework in which my base.html file looks like this  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{% load bootstrap3 %}
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
     
      &lt;title&gt;Michael Goytia&lt;/title&gt;
  
      {% bootstrap_css %}
      {% bootstrap_javascript %}
  
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;!-- Static navbar --&gt;
      &lt;nav class="navbar navbar-custom navbar-static-top"&gt;
      
        &lt;div class="container"&gt;
       
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed"
              data-toggle="collapse" data-target="#navbar"
              aria-expanded="false" aria-controls="navbar"&gt;
               &lt;!-- put three little bars in toggle button--&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
               &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"&gt;&lt;i class="fa fa-user-secret"&gt;&lt;/i&gt;
              &lt;b&gt;Michael Goytia&lt;/b&gt;&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a href="{% url 'personal_info:about_me'  %}"style="color:#6C9F9F"&gt;&lt;i class="fa fa-user-circle-o"&gt;&lt;/i&gt;
                &lt;b&gt;About Me&lt;/b&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"&gt;&lt;i class="fa fa-paper-plane"&gt;&lt;/i&gt;
                &lt;b&gt;Projects&lt;/b&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"&gt;&lt;i class="fa fa-address-book"&gt;&lt;/i&gt;
                &lt;b&gt;Contact Information&lt;/b&gt;&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            
          &lt;/div&gt;&lt;!--/.nav-collaspse --&gt;
        &lt;/div&gt;
      &lt;/nav&gt; 
  
      &lt;div class="container"&gt;
  
        &lt;div class="page-header"&gt;
          {% block header %}{% endblock header %}
        &lt;/div&gt;
        &lt;div&gt;
          {% block content %}{% endblock content %}
        &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- /container --&gt;
      &lt;!-- Place this tag in your head or just before your close body tag. --&gt;
      &lt;script async defer src="https://buttons.github.io/buttons.js"&gt;&lt;/script&gt;
      &lt;style&gt;
        .navbar-custom
        {
          background:#013737;
          border-radius:0;  
        }
      
        .navbar-toggle .icon-bar
        {
          background-color:#6C9F9F; 
        }
        .navbar-header .navbar-toggle
        {
          background-color:#0F5151;
        }
        footer{
          background:#013737;
          position:fixed;
          left:0px;
          bottom:0px;
          height:80px;
          width:100%;
        }
        body{
         background:#438383;
         padding: 0;
         margin: 0;
        }
        .nav &gt; li &gt;a:hover{
          background-color:#256A6A;
        }      
  
      &lt;/style&gt;
    
    &lt;/body&gt;
  
    &lt;footer&gt;
  
    &lt;/footer&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I believe the problem resides in my base.html file however here is a sample html of another page that use base.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{% extends "personal_info/base.html" %}
  
  {% block content %}
  &lt;h1&gt;&lt;b&gt;&lt;u&gt;Projects&lt;/u&gt;&lt;/b&gt;&lt;h1&gt;
  
   &lt;div class="panel panel-custom"&gt;
        &lt;div class="panel-heading"&gt;
          &lt;h1&gt;
            &lt;b&gt;&lt;center&gt;Github Information&lt;/center&gt;&lt;/b&gt;
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"&gt;&lt;/div&gt;
          &lt;script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"&gt;&lt;/script&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;!--panel --&gt;
  
   &lt;div class="panel panel-custom"&gt;
        &lt;div class="panel-heading"&gt;
          &lt;h1&gt;
            &lt;b&gt;&lt;center&gt;Academic&lt;/center&gt;&lt;/b&gt;
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          
        &lt;/div&gt;
      &lt;/div&gt; &lt;!--panel --&gt;
  
   &lt;div class="panel panel-custom"&gt;
        &lt;div class="panel-heading"&gt;
          &lt;h1&gt;
            &lt;b&gt;&lt;center&gt;Personal&lt;/center&gt;&lt;/b&gt;
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          
        &lt;/div&gt;
      &lt;/div&gt; &lt;!--panel --&gt;
    
    &lt;style&gt; 
       .panel-custom .panel-heading{
         background-color:#013737;
         color:#6C9F9F;
         border-radius: 50px 15px;
       }
       .panel-custom
       {
         background-color:#438383;
       }
       
         
       
       
    &lt;/style&gt;
    
  {% endblock content %}</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am new to web development so any help would me much appreciated.</p>