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 asaf omri
asaf omri
Courses Plus Student 2,784 Points

Can somebody tell me why extacly do i have spaces in my headlines

http://port-80-qwqjl89fhg.treehouse-app.com/

Johnatan Guzman
Johnatan Guzman
Courses Plus Student 2,360 Points

Images are inserted inline-block. A known bug with inline-block is that it leaves small spaces between the elements. The best known hack is to put "font-size: 0" on the parent element. In your case the parent element is the section.

4 Answers

Craig Watson
Craig Watson
27,930 Points

I think but am not certain you are referring to the white space between your header and nav elements also the white outline around your header/nav ??

I so this is to do with the browser default settings for margin and padding. You should have a "normalize.css" file which would eradicate this issue by resetting most of the browser default styles allowing you width at 100% to stretch all the way across the page.

Please let me know if this is not your issue and explain in a little more detail what you would like a resolution to ?

Thanks Craig

asaf omri
PLUS
asaf omri
Courses Plus Student 2,784 Points
asaf omri
asaf omri
Courses Plus Student 2,784 Points

Yeah, that's the one i was refering to, Thank you, now I got another question how can i remove the blank between my header and nav?

also, do I need to place the normalize.css in every site I'm making?

Craig Watson
Craig Watson
27,930 Points

Hi Asaf,

Yes the below is the link to the one i use as they can be downloaded and following that is the code needed to put it in the head section of your site.

http://necolas.github.io/normalize.css/

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Site | My Site Is Great</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>

With respect to your nav;

You have "16px margin" wrapping the ul element, this may be also to do with the browser default, but check your code looking for any styles containing the "ul" or "nav ul" with margin: 16px;

Hope this helps Craig

asaf omri
PLUS
asaf omri
Courses Plus Student 2,784 Points
asaf omri
asaf omri
Courses Plus Student 2,784 Points

Normalization seems to fix the problem, but again now i got a blank from my aside to nav , and the pictures seems to be very close to my aside..., I am sorry I new to the whole thing.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Its no problem Asaf,

Ive taken a look at your code and there is still the 16px margin on the navigations ul element.

change your margin to padding and this will help the look of the site to,

in regards to the images what normalize has done is remove all default margins from images to so just select your images in your css and add a little margin as below.......

img {
    margin: 2.5%;
}

using the percentage will help keep the margin responsive !!

Hope this helps but if you have any other questions please just ask !

Craig