Not sure how the initial is working in the media query for main-nav. The previous padding-left for the main-nav was 50px

Could you post your current code so we could have a look at it? :-)

At a guess from here, you're perhaps not correctly overriding the main style in your media query, or there's a default style in a parent element that's pushing the padding to the right.

Hi Jonathan,

I was following the CSS Layout Techniques, Table Displays tutorial and was enquiring re. the code used in the class. I might have posted my question in the wrong place.

This is it though:

.main-nav {
    padding-left: 50px;
}
.main-logo,
.main-nav li {
    border-radius: 5px;
}
.main-nav li {
    margin-right: 10px;
}
.main-logo a, 
.main-nav a {
    color: white;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 10px 20px;
}

/* Media Queries
================================ */

@media (max-width: 768px) {
    .main-logo,
    .main-nav,
    .main-nav li {
        display: block;
        width: 100%;
        margin-right: 0px;
    }
    .main-nav {
        padding-left: initial;
    }
    .main-nav li {
        margin-top: 15px;
    }
}

Hi Mary, no you're in the right place. :)

But when you're posting code, there's a great feature in the forums for formatting it so it's more readable which you can learn about from the markdown cheatsheet below. It'll come naturally to you once you use it but click edit on your post to see how I did it :)

As for the code itself,

If you try padding-left: 0px, you should be able to control padding in your media query. I may be wrong but I believe initial takes on the original value of the padding-left: 50px rule, so...

media (max-width: 768px) { 

.main-logo, .main-nav, .main-nav li { 
display: block; 
width: 100%; 
margin-right: 0px; } 

   .main-nav { 
     padding-left: 0px; 

   } 

   .main-nav li { 
       margin-top: 15px; 

   }

 }

Hope this helps!