I've noticed a strange gap between the "container" div and the top of the page. Adding a -20px margin to the container eliminates the gap, but I'm looking for a solution that doesn't involve manipulating the CSS in that manner. Despite setting the body with 0 padding and 0 margin, the gap persists. What could be causing this issue?
Container background = red
Body background = green
https://i.sstatic.net/P2qMh.png
HTML Base File
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<meta name="description" content="Blueprint: Horizontal Drop-Down Menu" />
<meta name="keywords" content="horizontal menu, microsoft menu, drop-down menu, mega menu, javascript, jquery, simple menu" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/>
<link type="text/javascript" href="{% static 'MMR/js/topnavbar.js' %}">
<!-- top nav scripts-->
</head>
<body>
{% include 'MMR/topnavbar.html' %}
{% block content %}
{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="static/MMR/js/cbpHorizontalMenu.min.js"></script>
<script>
$(function() {
cbpHorizontalMenu.init();
});
</script>
</body>
</html>
HTML Extension:
<head>
<link rel="stylesheet" type="text/css" href="{% static 'MMR/css/topnav-default.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'MMR/css/topnav-component.css' %}">
</head>
<div class="container">
<header class="clearfix">
<!--<span>Tagline</span>-->
<h1>Application</h1>
<nav>
<a href="http://tympanus.net/Blueprints/FullWidthImageSlider/" class="icon-arrow-left" data-info="previous Step">Previous Blueprint</a>
...
Upon inspection using Chrome, an unidentified section seems to be causing the gap. Removal of this section resolves the issue. Here is a screenshot: