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 trialOttavia Milani
5,193 PointsMy green header bar doesn't cover the entire width of the browser window but just a bit over the width of the imgs.
I have used the exact same CSS code that he uses in the video so I don't get why my green header bar doesn't take up the entire width of my browser bar.
Ottavia Milani
5,193 Pointswrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
Aurelian Spodarec
7,369 Pointsyou want the nav bar to expand all the way across right? so that 100% and you set the wrapper to 940px so that the content on the page i guess .
4 Answers
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsIt is because you may have bigger width than 940px and you use margin property. Margin property sets the wrapper in center of your browser. Meaning in case you have browser screen width 1200px.
You set your wrapper width as 940px. Mostly browser lay out your wrapper from left to right. Now browser will move 130px right to place your starting corner of your webpage.
Padding will create inner space for elements inside wrapper.
Finally wrapper is not an HTML element. So if you want to use in CSS file. Read Below!
There is no HTML element called wrapper. If wrapper is a class you should use .(dot) in front of wrapper in CSS file to select wrapper section. Check the code snippet below.
.wrapper{
}
if wrapper is an ID, you should use # in front of wrapper in CSS file to select wrapper section. Check the code snippet below.
#wrapper{
}
I hope it helps.
Regards
Karthikeyan Palaniswamy
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsIt does not take the entire width of my browser screen as well. It is because my browser screen width is larger than 940px.
Check to the code snippet to make your green header to fill your browser screen
#wrapper{
/* max-width: 940px; */
/* margin: 0 auto; */
padding: 0 5%;
}
I commented out the max-width and margin property. max-width property sets the width for your browser window or for any browser implicitly.
margin property center the wrapper id horizontally.
Anthony Boardman
4,672 PointsDon't use display block that takes the size down and try this at the top of your css
*{ Margin: 0; padding: 0; }
Ottavia Milani
5,193 Pointshow can I avoid using the display block? thx
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsYou can set display to inline or inline-block in CSS file
display: inline-block;
OR
display: inline;
Hope it helps
Ottavia Milani
5,193 PointsOk... so It seems I've done everything correctly and exactly what the guy on the video tells me to do. most of the issues are connected to the use of the id="...." and the relative #.....
For example the
<div id="wrapper"> </di>
and its relative
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%
}
The same happens when I add
<section id="primary"> </section>"
and
<section id="secondary"> </section>
to the responsive.css file in order to make two sections go next to each other rather than under one another.
The same issue happens more than once, as if the css doesn't get linked to the html file. Weirdly enough other styling changes work just fine!
Help!
nvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsIn your first <div> tag there is spelling error at the closing <div>. Please check your closing </div> tag. You have missed 'v' for </div>
<div><div id="wrapper"> </div>
Try again and let me know is that fixed?
Ottavia Milani
5,193 Pointsin the original code it's correct...
Paul Sullivan
7,876 PointsPaul Sullivan
7,876 PointsPost the code and we can help ya out. :)