Hey there! I recently created a Search Bar and wrapped it inside a div with a max-width of 500px, but for some reason, the max-width is not working as expected. I searched on Stack Overflow and came across a helpful link on Why would max-width not work on this? but unfortunately, the solution provided didn't work for me.
Can someone please shed some light on why it's not working and how I can fix it? Any guidance or assistance would be greatly appreciated!
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
body{
font-family:arial;
}
header{
width: 100%;
padding:20px 20px;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
}
.menu-container{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}
.search-input-container{
width:100%;
max-width:500px;
}
input[type="search"]{
border-radius:500px;
padding:5px 10px;
width:100%;
}
ul li{
list-style:none;
}
ul{
margin:10px;
}
button{
outline:none;
border:none;
padding:8px 15px;
}
a{
text-decoration:none;
}
.submenu-items{
position:absolute;
top:100%;
border:2px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<nav>
<!-- Logo Wrapper -->
<div class="logo">
<a href=""><img src="" alt="Test Logo"></a>
</div>
<!-- Search Wrapper || Issue Area-->
<div class="search-container">
<form action="get">
<div class="search-input-container">
<input type="search" class="search">
</div>
</form>
</div>
<!-- Search Wrapper Ends ↑ -->
<div class="menu-container">
<ul>
<li>
<a href="">Help</a>
</li>
</ul>
<ul>
<li>
<a href="">Campaigns</a>
</li>
</ul>
</div>
<div class="buttons-container">
<a href="#"><button class="Login-btn">Log in</button></a>
<a href="#"><button class="signup-btn">Sign up</button></a>
</div>
</nav>
</header>
</body>
</html>