Phantom White space

Hello Aaron,

So I think what you are describing is the .name element not being vertically centered with the nav element. To fix this, you can either change the margin-top of .name to margin-top: .85em; OR change .main-nav to margin: 0.5em 0; which would change both the top and bottom margin of the nav.

To explain further:

It is correct to use the Dev tools to explore this. I personally find it easier to look at the inspector horizontally, so if you can open it that way it may be easier. The elements would then be on the left, and the styles would be on the right. There should be three dots that go vertically that you can click on in the right corner to change how the dock is positioned. You don't have to do this if you like it vertically, though!

Anyway… to play around with your code when the inspector was open I clicked on the h1 element on the left and then on the right scrolled down to that box with the colors to look at how much padding and margin the element had. You can then edit the element's margin or padding by scrolling back up. You can either type in a new style in the area that says element.style {

} or you can edit a style that's already there if you like. These changes are not permanent, so feel free to play around. You can always refresh the page if you make a big mistake, just remember what code you entered so you can change it in your code editor if it's what you want.

In the inspector, by setting margin and padding to 0 on .name, I was able to more clearly see how much space the element actually takes up. I could then play around with the margin to see what looked best. To keep searching for the problem though I left margin and padding at 0. I then hid the main-nav with display: none to see if it's playing a part in the unnecessary space. When it disappeared, it was clear to me it was playing a role in the space problem, so I refreshed the page and went into the styles for that element and adjusted the margin until it looked more aligned to me. Basically what I do is play around with the element or multiple elements that are close to the element to see what might be the problem, and then examine styles and edit/play around with the styles as needed.

Hope that helps!

Hello again Aaron!

I have been testing your workspace and I see your problem:

http://uploadpie.com/sOlTO

Is true that the logo-name does not fill all the space, but your ul class does! this is because your ul has 47px height and, inside, the li elements have 25px height and 10px of padding on top and bottom.

If you want them to be aligned vertically you have to change the float to none and the display to inline or inline block. Those are the properties that would let you use vertical-align property.

Also, this is not a good practice but you could adjust by "hand", the font-size of the menu to be the same as the nav, so they have the same height in the <a> and you could erase the paddings of the li elements, or you could reduce the paddings until they are at the same height.

Hope this helps! if you need more help or if you have any question please let me know!

HI aaron. thanks for posting your question. Where in the nav bar are you trying to align the h1.name element?

and as far as the white space goes.

to remove all white space from the h1.name element, simply delete the padding left: 2em; rule on line 91 of your style.css page and replace it with a margin: 0px; rule.

the "phantom" white space is coming from the user agent style sheet.

here is a video that might be helpfull.

https://teamtreehouse.com/library/css-foundations/getting-started-with-css/fundamental-concepts-2

cheers!