Can't edit text with media query - html

Question

I have the following html for my header.
<header id="header">
<img src="images/logo.png"/>
<div class="container">
<nav id="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Pricing
</li>
<li>
Sessions
</li>
<li>
Sign Up
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</header>
I have the following for my CSS:
img .header-basic{
height:30px;
}
#content {
margin: 5px;
margin-top:00px;
}
#logo {
height: 100px;
top: 0px;
position: absolute;
left: 75px;
}
#content img{
float:right;
}
/*Header*/
#header img {
width: 450px;
height: auto;
display:block;
margin: 0 auto;
}
#media only screen and (max-width:800px) {
#header img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Verdana';
}
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Verdana';
}
/*End Header*/
My media query activates for making the image smaller but the text stays the same. I want the margin to be decreased to keep all the navigation on one line. I am coding in Visual Studio and testing in Chrome 55.0.2883.87 m (64-bit).

Answer 1

you can just decrease the margin and the font-size to make them in one line like this :
img .header-basic{
height:30px;
}
#content {
margin: 5px;
margin-top:00px;
}
#logo {
height: 100px;
top: 0px;
position: absolute;
left: 75px;
}
#content img{
float:right;
}
/*Header*/
#header img {
width: 450px;
height: auto;
display:block;
margin: 0 auto;
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Verdana';
}
#media only screen and (max-width:800px) {
#header img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 15px;
font-family: 'Verdana';
}
}
#media only screen and (max-width:468px) {
#nav ul li {
margin-left: 1px;
margin-right: 1px;
}
#nav ul li a {
font-size: 10px;
}
}
/*End Header*/
<header id="header">
<img src="images/logo.png"/>
<div class="container">
<nav id="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Pricing
</li>
<li>
Sessions
</li>
<li>
Sign Up
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</header>