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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Sebastian Eguez
Sebastian Eguez
8,248 Points
Posted by Sebastian Eguez
Sebastian Eguez
8,248 Points

Navigation is not working as expected

@media screen and (min-width: 480px) {

    /***********************************************
    PAGE: HEADER
    ***********************************************/

    nav {
    background: pink;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
    }

}

http://w.trhou.se/gfwwcud5zu

My navigation is stacking on top of each other versus staying side by side horizontally like Nick's.

Please help.

: )

Sebastian Eguez
Sebastian Eguez
8,248 Points
Sebastian Eguez
Sebastian Eguez
8,248 Points

FIXED.

I messed around with the main css.

: )

2 Answers

Stephen Viesto
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Viesto
Full Stack JavaScript Techdegree Student 4,997 Points
Stephen Viesto
.a{fill-rule:evenodd;}techdegree
Stephen Viesto
Full Stack JavaScript Techdegree Student 4,997 Points

Hey Sebastian, I think you may be missing the display: inline-block; bit in your nav class.

Sebastian Eguez
Sebastian Eguez
8,248 Points
Sebastian Eguez
Sebastian Eguez
8,248 Points 
/***********************************************
NAVIGATION
***********************************************/

nav {
    text-align: left;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding:0;
}

nav li {
display: inline-block;
}

nav a {
    font-weight: 700;
    padding: 50px 50px;
}
Stephen Viesto
.a{fill-rule:evenodd;}techdegree
Stephen Viesto
Full Stack JavaScript Techdegree Student 4,997 Points

Glad you figured it out. My answer should have directed you to actually put the display bit into your list selector instead of the nav. Sorry about that

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

I put together a working version of the courses site for new students to use as a reference for debugging if you would like to take a look :)

Live version - http://rokkitpress.github.io/Treehouse_How_To_Make_A_Website/

Raw Code To Compare - https://github.com/rokkitpress/Treehouse_How_To_Make_A_Website

Hope this helps you out Craig