I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises when I try to style the background of the navigation items by enclosing them in a div with a background color. This results in the box overlapping the page title, creating an undesirable layout like this: https://i.stack.imgur.com/flT3M.jpg
How can I ensure that the navigation box aligns properly with the navigation menu options?
Below is the code snippet I am currently using:
/* HEADER */
header .headerBox {
background-color: #000000;
width: 100%;
min-height: 50px;
}
.container {
width: auto;
... (rest of CSS code) ...
<body>
<!-- HEADER -->
<header>
<div class="headerBox">
<div class="container">
<nav>
<ul>
<li><a href="index.html"><span class="name">Company name</span></a></li>
<li><a href="account.html"><span class="account">Account</span></a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- PAGE TITLE -->
<div>
<section class="page-title">
<div class="container">
<h1>Page Title</h1>
</div>
</section>
</div>
<!-- NAVIGATION BAR -->
<div class="navigationBox">
<div class="container">
<ul>
<li><a href="menu-option-1.html"><span class="menu-item">Menu Option 1</span></a></li>
<li><a href="menu-option-2.html"><span class="menu-item">Menu Option 2</span></a></li>
</ul>
</div>
</div>
</body>