Search code examples
pythondjangohtmldjango-bootstrap3

can't get rid of gap between header and body

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.

enter image description here

I am developing this webpage using python/django framework in which my base.html file looks like this 

{% load bootstrap3 %}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
    <title>Michael Goytia</title>

    {% bootstrap_css %}
    {% bootstrap_javascript %}

  </head>

  <body>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Static navbar -->
    <nav class="navbar navbar-custom navbar-static-top">
    
      <div class="container">
     
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
            data-toggle="collapse" data-target="#navbar"
            aria-expanded="false" aria-controls="navbar">
             <!-- put three little bars in toggle button-->
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
            <b>Michael Goytia</b></a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="{% url 'personal_info:about_me'  %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
              <b>About Me</b></a>
            </li>
            <li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
              <b>Projects</b></a>
            </li>
            <li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
              <b>Contact Information</b></a>
            </li>
          </ul>
          
        </div><!--/.nav-collaspse -->
      </div>
    </nav> 

    <div class="container">

      <div class="page-header">
        {% block header %}{% endblock header %}
      </div>
      <div>
        {% block content %}{% endblock content %}
      </div>

    </div><!-- /container -->
    <!-- Place this tag in your head or just before your close body tag. -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <style>
      .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 > li >a:hover{
        background-color:#256A6A;
      }      

    </style>
  
  </body>

  <footer>

  </footer>
</html>

I believe the problem resides in my base.html file however here is a sample html of another page that use base.html

{% extends "personal_info/base.html" %}

{% block content %}
<h1><b><u>Projects</u></b><h1>

 <div class="panel panel-custom">
      <div class="panel-heading">
        <h1>
          <b><center>Github Information</center></b>
        </h1>
      </div>
      <div class="panel-body">
        <div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
        <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
      </div>
    </div> <!--panel -->

 <div class="panel panel-custom">
      <div class="panel-heading">
        <h1>
          <b><center>Academic</center></b>
        </h1>
      </div>
      <div class="panel-body">
        
      </div>
    </div> <!--panel -->

 <div class="panel panel-custom">
      <div class="panel-heading">
        <h1>
          <b><center>Personal</center></b>
        </h1>
      </div>
      <div class="panel-body">
        
      </div>
    </div> <!--panel -->
  
  <style> 
     .panel-custom .panel-heading{
       background-color:#013737;
       color:#6C9F9F;
       border-radius: 50px 15px;
     }
     .panel-custom
     {
       background-color:#438383;
     }
     
       
     
     
  </style>
  
{% endblock content %}

I am new to web development so any help would me much appreciated.

Solution

  • Alright well after playing around with a bunch of things I realized somehow I had a border around my header. So in order to get rid of it I added the line

    .container .page-header { border-bottom: 0px:} which then got rid of this border.

    Not sure why the border was there in the first place.

    If anyone comes along I hope this helps.