https://i.sstatic.net/Qa2iS.png I am looking to achieve a solid navbar with centralized workouts and diets.
https://i.sstatic.net/4bUlX.png I attempted to create a navbar, but when I added a search bar, it caused my "Workouts" and "Diets" to be off-center. I'm not sure why this is happening. Removing the search bar fixes the issue, but adding it back causes the list to shift to the left. Additionally, my navbar appears transparent, and when scrolling through the website, the words seem to overlap with the navbar. Can anyone advise me on why this is happening? Apologies if this question seems basic, I'm new to HTML and CSS.
#navbar {
position: fixed;
top: 0;
width: 100%;
overflow: auto
}
.container1 {
background-color: white;
border: 1px solid black;
max-height: 30px;
}
.container2 {
background-color: white;
border: 1px solid black;
max-height: 40px;
}
a {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#brand {
margin: 0;
padding: 0;
top: 29px;
left: 20px;
font-size: 30px;
float: left;
position: fixed;
font-family: Roboto, sans-serif;
font-weight: 300;
font-style: italic;
}
#brand:hover {
color: white;
background-color: black;
}
ul {
list-style-type: none;
padding: 0;
margin: 2px;
text-align: center;
}
li {
color: black;
display: inline;
}
li a {
font-family: Roboto, sans-serif;
font-style: bold;
padding: 2px;
font-size: 20px;
}
li a:hover {
background-color: #111;
color: white;
}
.search {
margin: 0;
padding: 0;
float: right;
}
#avatar {
text-align: center;
margin-top: -3px;
padding-top: 5px;
}
#avatar1 {
max-height: 25px;
max-width: 25px;
}<head>
<meta charset="UTF-8">
<title>Welcome to Smart Sports!</title>
<link type="text/css" rel="stylesheet" href="Sportshome.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">
<link href='navbar.css' rel='stylesheet' type='text/css'>
<div id="navbar">
<div class="container1">
<p id="avatar">
<img src="avatar1.png" id="avatar1">
</p>
</div>
<div class="container2">
<a href="Sportshome.html" id="brand">Sports. Sweat. Smart.</a>
<p><input type="text" class="search"></p>
<ul>
<li><a href="workout.html">Workouts</a></li>
<li><a href="diet.html">Diets</a></li>
</ul>
</div>
</div>
</head>