responsive navigation bar css - html

Question

I am trying to implement a responsive top navigation bar into my website. After several trials it's still not working properly and I can't understand where I went wrong.
Could you please tell me if there are any mistakes ?
I attached below the script for the top navigation bar and the script for responsive.
Thank you very much for your help.
Turo
#main_nav {
background-color: #FFFFFF;
position: sticky;
top: 0;
position: -webkit-sticky;
margin: collapse;
border-bottom: 0.2em solid #F8FBF9;
z-index: 10;
box-shadow: 0.2em 0.3em 0.8em #E5E4E3;
}
#main_nav ul {
padding: 0;
margin: 0;
text-align: center;
}
#main_nav ul li {
display: inline-block;
width: 19.7%;
}
#main_nav ul li a{
color: #FF0D90;
padding: 1em 0;
font-family: Monaco, monospace;
font-weight: lighter;
font-size: 1.2em;
text-decoration: none;
text-align: center;
display: inline-block;
width: 100%;
}
#main_nav ul li a:hover {
color: #5CA3F9;
background-color: #F8FBF9;
}
.sel_nav{
background-color: #FAFCFB;
}
#media screen and (max-width: 480px) { /* CSS Rules */
body {
width: 100%;
padding: 0;
margin-right: 0;
margin-left: 0;
overflow: scroll;
}
#main_nav {
position: relative;
margin-right: 0;
margin-left: 0;
width: 100%;
height: 100%;
text-align: center;
}
#main_nav ul {
width: 19%;
padding: 1%;
text-align: center;
margin: 0;
}
#main_nav ul li {
display: block;
width: 100%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
margin-left: 120%;
}
#main_nav ul li a {
display: block;
text-align: center;
vertical-align: middle;
padding: 0.5em 3em 0.2em 1.5em;
}

Answer 1

Try the below code, it should work. You had some unnecessary width and padding in your code and you don't need to use display: inline-block; for each and every elements. Here's a cleaner code:
#main_nav {
display: inline-block;
overflow: hidden;
background-color: #FFFFFF;
top: 0;
position: sticky;
position: -webkit-sticky;
margin: collapse;
border-bottom: 0.2em solid #F8FBF9;
box-shadow: 0.2em 0.3em 0.8em #E5E4E3;
width: 100%;
}
#main_nav ul {
list-style-type: none;
text-align: center;
display: flex;
justify-content: space-around;
padding: 0;
}
#main_nav ul li {
display: inline-block;
}
#main_nav ul li a {
color: #FF0D90;
text-decoration: none;
font-family: Monaco, monospace;
font-weight: lighter;
font-size: 1.2em;
padding: 1.5em 1.5em;
}
#main_nav ul li a:hover {
color: #5CA3F9;
background-color: #F8FBF9;
}
#media screen and (max-width: 480px) {
#main_nav {
display: block;
}
#main_nav ul {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#main_nav ul li {
display: block;
}
#main_nav ul li a {
display: inline-block;
padding: 0.5em 3em;
}
}
<nav id="main_nav">
<ul>
<li>HOME</li>
<li>NATURA</li>
<li>CITTA'</li>
<li>IMMAGINI</li>
<li>CONTATTI</li>
</ul>
</nav>
To test responsiveness, test it out at JSFiddle.