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 trialTHOMAS PRETE
7,009 PointsWhy does my Header increase it's height when I adjust screen size?
After I input this CSS my header height no longer stays static. It increases as I adjust the screen size larger.
@media screen and (min-width: 660px) {
/*****************************
HEADER
*****************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin: 5%;
text-align: left;
width: 45%
height: auto;
}
h1 {
font-size: 4em;
}
h2 {
font-size: 2em;
margin-bottom: 20px;
}
}
Jason Anello
Courses Plus Student 94,610 Pointsfixed code formatting
1 Answer
Jason Anello
Courses Plus Student 94,610 PointsHi Thomas,
In the video, Nick added the declaration margin-left: 5%;
to #logo
You have margin: 5%;
which puts a 5% margin all the way around the logo.
% based margins are based off the width of the parent element which is the header in this case.
As you increase the browser width you're increasing the width of the header which in turn increases the size of the margin on the logo.
Hadi Khalili
7,969 PointsHadi Khalili
7,969 PointsFrom the code above, it looks like relative unit (em) is the cause of it. Remember the em compounds. if the h2 is on the header the font size increases and increase the height. Use 'rem' and see what happens.
Post the whole code.