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

Emma Centenera
Emma Centenera
7,296 Points
Posted by Emma Centenera
Emma Centenera
7,296 Points

Nav list off center

Hi I can't get my nav list to center properly. I am using inline-block and text-align: center but it still stays slightly off center. It is very noticeable when I bring the browser down to 480px width. I have searched the forum but can't find anything that will fix it. Can someone help? my code is...

.main-header {min-width: 480px;height: 150px;white-space: nowrap;} header {text-align: center; padding-top: 20px;} .main-nav {text-align: center} .main-nav li {display: inline-block; list-style: none; padding: 5px 10px; margin-top: 10px; margin-right: 10px;}

I can add the HTML code too if needed but I'm not sure how, do I just copy and paste like the css?

Thanks

5 Answers

Tunde Adegoroye
Tunde Adegoroye
20,597 Points
Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Is this the look that you are going for ? http://codepen.io/_TUNDS/pen/dwbxq , You should make the headers width 100% so it spans across the page and also it will always centre the nav links using a fixed with of 480px can make it more complicated also you can easily move text to the left or right by changing the value from centre to either left or right

Emma Centenera
Emma Centenera
7,296 Points
Emma Centenera
Emma Centenera
7,296 Points

Yes thats what I am going for a centered nav. I tried changing width to 100% but it didn't work. I put the min-width of 480px in because I don't want the page to go smaller than that size, which from what I understand is the same width as a smartphone.

dpjvanvalderen
dpjvanvalderen
6,081 Points
dpjvanvalderen
dpjvanvalderen
6,081 Points

What you can do is give your nav a max-width in percentages. Then use margin: auto; this will mostly center it. When posting code to the forum: https://teamtreehouse.com/forum/posting-code-to-the-forum

I can't really understand what you're trying to do. Do you want it centered in the middle of your page or do you want to center it in a certain area?

Emma Centenera
Emma Centenera
7,296 Points
Emma Centenera
Emma Centenera
7,296 Points

Thanks for the posting code tip. I'll try posting according to what the link said. I want to center the nav list directly under the header within the main-header div. Which is basically the middle of the page.

.main-header {
    min-width: 480px;
    height: 150px;
    white-space: nowrap;
    background: -webkit-linear-gradient(#7A513A, #552917 75%);
    background: -moz-linear-gradient(#7A513A 10%, #552917 75%);
    background: -o-linear-gradient(#7A513A 10%, #552917 75%);
    background: -ms-linear-gradient(#7A513A 10%, #552917 75%);
}

header {
    font-family: 'Ubuntu', sans-serif;
    color: #90CCC8;
    font-size: 3.375em;
    padding-top: 20px;
}

header,
.main-nav {
    text-align: center;
}

.main-nav li {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    color: #552917;
    background: #FFB34A;
    border-radius: 3px;
    list-style: none;
    padding: 5px 10px;
    margin-top: 10px;
    margin-right: 10px;

}

<div class="main-header">
                <header>EmmyLou's Cakes</header>
                    <ul class="main-nav">
                        <a href=""><li>Flavours</li></a>
                        <a href=""><li>Gallery</li></a>
                        <a href=""><li>Pricing/Size Guide</li></a>
                        <a href=""><li>Contact</li></a>
                    </ul>
            </div>

Thanks

dpjvanvalderen
dpjvanvalderen
6,081 Points
dpjvanvalderen
dpjvanvalderen
6,081 Points 
header,
.main-nav {
    text-align: center;
}

This part of code is not centering your navigation, it is centering your text inside your navigation.

Try this and see if it works:

header,
.main-nav {
    max-width: anypercentage you like;
    margin:auto;
}
Tunde Adegoroye
Tunde Adegoroye
20,597 Points

That should do the trick you just need to make sure the width isn't fixed and is a percentage i.e if the width is 90% the left and right margin should should be 5% so that it fills the screen perfectly

Emma Centenera
Emma Centenera
7,296 Points
Emma Centenera
Emma Centenera
7,296 Points

I tried this, it just left aligns both the heading and the nav li. When I change the value in the text-align to left or right it changes but center stays slightly off center.

Tunde Adegoroye
Tunde Adegoroye
20,597 Points
Tunde Adegoroye
Tunde Adegoroye
20,597 Points

http://codepen.io/_TUNDS/pen/dwbxq Here is an example is this what you mean you want ?

Emma Centenera
Emma Centenera
7,296 Points
Emma Centenera
Emma Centenera
7,296 Points

http://codepen.io/anon/pen/mjukq This is what I am trying to do. I put a normalize in and it looks better... well more centered. But do you know a way to make the nav stretch out to line up with the S in cakes? I've been trying use padding and margins.

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

You would have to use a media query if you look at my updated pen http://codepen.io/_TUNDS/pen/dwbxq this shows you how i have used a media query and percentages to align the nav next to each other on anything larger than an iPad and center the nav on larger devices check it out this should explain everything :)

Emma Centenera
Emma Centenera
7,296 Points
Emma Centenera
Emma Centenera
7,296 Points

I got it! Yay. Thanks so much for your help guys and for replying so quickly. I'm still new to Treehouse (only a week on here) and am amazed at how fast questions get answered. It's awesome. Thanks Again