I have encountered an issue with a navigation bar on one of my website projects. The HTML elements I am trying to add afterwards are not aligning properly with the navbar. I have thoroughly checked for any open HTML tags, syntax errors, or conflicting CSS styles, but the problem persists. The only solution I have found so far is using absolute positioning, which I want to avoid as I aim for flexibility in the design of my site.
nav ul {
list-style-type: none;
padding: 0;
}
nav li {
display: inline;
float: left;
}
nav a:link,
nav a:visited {
background-color: brown;
color: white;
display: block;
width: 160px;
text-align: center;
padding: 10px 0;
}
nav a:hover {
background-color: black;
}
header {
margin: 0 auto;
background-image: url("http://localhost/prosoft_noi_orizonturi/images/header-cover.jpg");
margin-bottom: 70px;
}
header h1 {
color: rgba(256, 256, 256, .8);
margin-left: 30px;
margin-top: 30px;
font-size: 50px;
}<header>
<nav>
<h1>Welcome,
<?php echo $_SESSION['user']?>!</h1>
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="search.php">Search</a></li>
<li><a href="w8form.php">W-8 Form</a></li>
<li><a href="notification.php">Notifications</a></li>
<li><a href="message.php">Messages</a></li>
<li><a href="cont.php">Account</a></li>
</ul>
</nav>
</header>A visual representation of the issue in the browser can be seen here.
I would greatly appreciate any assistance in resolving this problem!