Let me illustrate the issue at hand. The black box/div covering the body text of the page is actually my website's main navigation (although with a light blue text color, it may be difficult to notice). Ideally, it should be positioned to the left of the feather image in the header, without any border. Unfortunately, it seems to be appearing outside the normal document flow:
Here is where it was intended to be:
Below is the twig template being used:
<!DOCTYPE html>
<html dir="ltr" lang="en-us">
...
<div id="layout">
<div id="header">
<img src="{{ asset('bundles/majorproductionsadisite/images/adi-gradient-logo.jpg') }}" alt="Adi Rule" />
<div id="nav">
<ul>
...
</ul>
</div>
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
<hr />
<div id="footer">
...
</div>
</div>
</body>
</html>
And the content template for that page:
{% extends "::base.html.twig" %}
{% block content %}
...
</div>
<div class="book">
...
</div>
{% endblock %}
I suspect the culprit might be in the CSS styling. Here is a snippet of my CSS:
@font-face{
...
}
#layout {
...
}
#header {
...
}
#nav {
...
}
#content {
...
}
hr {
...
}
#footer {
...
}
If anyone has any advice on how to correctly position the navigation, I would greatly appreciate it.