when I change the resolution of screen contents are going outside from nav bar
@media screen and (max-width:836px) {
nav{
flex-direction: column;
}
}<nav>
<div class="logo">
<img src="fp1.png" alt="" width="140px">
</div>
<ul>
<li> <a href="home.htm">home</a></li>
<li><a href="about.htm">about</a></li>
<li> <a href="explore.htm">explore</a></li>
<li> <a href="sing in.htm">sing.in</a></li>
</ul>
<div class="searchbar">
<input type="text" name="" id="" placeholder="search hear">
<div class="searchlogo">
<span class="material-symbols-outlined">
search
</div>
</div>this is the result enter image description here
