I've been struggling to align my submenu with the navbar, and I suspect there is an issue with the CSS that I can't seem to figure out. CodePEN: https://codepen.io/wowasdi/pen/xxKzdQq
Even after trying to adjust the navbar CSS settings by changing display to block, it doesn't appear to be working.
Image of nav bar
CSS:
.container{
width:80%;
margin:auto;
overflow:hidden;
}
/* Rest of the CSS code here */
Html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header>
<div class="container">
<div id="headerText">
<div id="header"></div>
</div>
<nav>
<ul class="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Page 1</a>
<ul class="dropdown">
<li><a href="#">SubPage 1</a></li>
<li><a href="#">SubPage 2</a></li>
</ul>
</li>
<li><a href="index.html">Page 2</a></li>
<li><a href="index.html">Contract</a></li>
</li>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>
<div class="body-container">
<div id="body"></div>
</div>
<script src="./js/main.js"></script>
</body>
</html>