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
Startup Shell
38,037 PointsHow 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>
3 Answers
Joseph Dalton
12,489 PointsHi,
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
28,148 PointsWhat does the CSS look like?
Startup Shell
38,037 Points/****************** 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; }
Startup Shell
38,037 Points/****************** 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; }
Joseph Dunleavy
4,491 PointsJoseph Dunleavy
4,491 PointsDid you give the header 100% width