For my assignment, I am designing a website layout and facing an issue where the text appears behind the navigation bar instead of below it. I have tried adjusting the margin-bottom to 50px with important tags and setting the nav bar as static.
Despite trying various settings and configurations, including messing around with different options, I haven't found a solution that works effectively.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Website Title</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<header>
<nav>
<ul>
<li class="website-title"><a href="#">Website Title</a></li>
<li><a href="Home">Home</a></li>
<li><a href="About">About</a> </li>
</ul>
</nav>
</header>
<body>
<div class="search-bar">
<input type="text" placeholder="Search for Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
head{
font-family: 'Roboto', sans-serif;
height:100vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddddd;
position:fixed;
padding:10px;
}
ul {
width:100vw;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.website-title {
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}