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

CSS

Posted by Jaspreet Singh
Jaspreet Singh
5,207 Points

height of h2 element is higher than other elements and i want to align h2 element at right side without margin property

...css *{ margin:0; padding:0; box-sizing:border-box; } a{ text-decoration:none; } .main-header a{ display:block; color:green; padding:0 15px; font-size:18px;

}

.main-header{ background-color:lightgray; padding:25px 0; }

.main-header li{ display:inline-block; margin:-5px; }

.sign{ display:inline-block; font-size:18px; font-weight:normal; color:green; background-color:yellow; margin-left:-5px; } .nav{ display:inline-block; background-color:yellow; }

...html <!DOCTYPE html> <html> <head> <title>Google|Jass</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="main-header"> <ul class="nav"> <li><a href="#">+You</a></li> <li><a href="#">Search</a></li> <li><a href="#">Images</a></li> <li><a href="#">Maps</a></li> <li><a href="#">Play</a></li> <li><a href="#">Youtube</a></li> <li><a href="#">News</a></li> <li><a href="#">Drive</a></li> <li><a href="#">Calender</a></li> <li><a href="#">More</a></li> </ul> <h2 class="sign">Sign In</h2> </header> </body> </html>

1 Answer

Damien Watson
Damien Watson
27,419 Points

The problem is that you're applying negative margin to all dimensions of the unordered list items (including top/bottom). This causes them to be thinner than the 'h2'.

Change to this if you want to keep the left/right negative margin. Don't use negatives myself, theres usually a better way, but this will fix your issue.

.main-header li { display:inline-block; margin:0 -5px; }
Jaspreet Singh
Jaspreet Singh
5,207 Points

thanq it solves my problem,but how can i align h2 at right side without margin property and i also use margin-top:-5px to h2 element but it didn't work

Damien Watson
Damien Watson
27,419 Points

If you remove the negative margins, then I can see about the ~5px space you're talking about that comes after the 'nav'. This is because you are using 'display:inline-block' which displays the element 'inline', it shows the nav item followed by a space, followed by nav item etc. The 'space' comes from your HTML where there is a space between each element.

<!-- Space will appear between elements -->
<li><a href="#">+You</a></li> <li><a href="#">Search</a></li>

<!-- No space will appear -->
<li><a href="#">+You</a></li><li><a href="#">Search</a></li>

The same can be said for your 'h2' because the 'ul' is also using an inline-block, there can't be a space between these two elements. It's not very readable but if you put it all on one line, your spaces will be gone (without margins ;).

<ul class="nav"><li>...</li>...</ul><h2 class="sign">Sign In</h2>

There are a few approaches and it depends what look you are after for what you do next. Display:inline-block works really well, sometimes I still use the old 'float:left;' style instead but it depends on what you want to do.

Good luck. :D