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 Styling Web Pages and Navigation Style the Portfolio

How can i make my menu responsive?

My menu is not responsive like the demo version. Its is flushed left and does not move to center when I resize the page.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lacey Irivn| Designer </title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Lato|Oswald:400,700" rel="stylesheet"> <link rel="stylesheet" href= "css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Lacey Irivn</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="icontact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section>

Did you give the header 100% width

3 Answers

Joseph Dalton
Joseph Dalton
12,489 Points

Hi,

I'm not familiar with the course, so this might be incorrect advice, but it looks like you are trying to center the header with the margin: 0 auto; on the wrapper; is that right? If so, then you'll need to put the wrapper div around the <header> element.

But if you don't want to alter the HTML, then just add a similar property to the header rules in your CSS, with a max-width and a margin-left and margin-right of auto.

Kevin Korte
Kevin Korte
28,149 Points

What does the CSS look like?

/****************** GENERAL ******************/

body{

font-family: 'lato', sans-serif;

}

wrapper{

max-width: 940px;
margin:0 auto;
padding: 0 5%;
}

a{ text-decoration: none; }

/****************** HEADING ******************/

logo{

text-align: center;
margin: 0;

}

/* green header / header{ background: #6ab47b; border-color:00000; } / nav background on mobile */ nav{ background: #599a6b; }

/* logo text*/ h1, h2 { font-family: 'oswald', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; color:#fff; }

a{ color: #6ab47b; }

/* nav links / nav a, nav a:visited { color:#fff; } / selected nav link / nav a.selected, nav a:hover { color:#32673f; } /***************** SITE BODY ******************/ body{ background-color: #fff; color:#999; }

/****************** GENERAL ******************/

body{

font-family: 'lato', sans-serif;

}

wrapper{

max-width: 940px;
margin:0 auto;
padding: 0 5%;
}

a{ text-decoration: none; }

/****************** HEADING ******************/

logo{

text-align: center;
margin: 0;

}

/* green header / header{ background: #6ab47b; border-color:00000; } / nav background on mobile */ nav{ background: #599a6b; }

/* logo text*/ h1, h2 { font-family: 'oswald', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; color:#fff; }

a{ color: #6ab47b; }

/* nav links / nav a, nav a:visited { color:#fff; } / selected nav link / nav a.selected, nav a:hover { color:#32673f; } /***************** SITE BODY ******************/ body{ background-color: #fff; color:#999; }