Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Table Display

Mary O'Gorman
Mary O'Gorman
1,482 Points

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

Don't see where the initial is coming from other then the 50px.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

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.

Mary O'Gorman
Mary O'Gorman
1,482 Points

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;
    }
}
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

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!

1 Answer

Matteo Simeone
Matteo Simeone
13,587 Points

Hi Mary, I think reading this article will be really useful for making things clearer. When you are setting your padding value to initial, you are applying the browser default value for that property, that I suppose is 0px. Hope this helps :-)