Technical Document Project help

Technical Document Project help
0

#1

For some reason I can’t get my navbar buttons to extend their width to the full length of the container

image

I used the example project as a basis for mine, and even copied the navbar and link codes verbatim, so I am not sure why I am having this problem. My #navbar li CSS is set to 100% width so I don’t get why this is happening. I have checked my code back and forth and I don’t appear to have any missed closed brackets or anything like that.


#2

Remove left: -50px; from #navbar li

You could make it look better by adding extra spaces to the right
#navbar ul { padding-right: 50px; }


#3

thanks for the advice, however this just caused the same problem but on the other side of the boxes. I would like them to extend to the full width of the container.

image


#4

Set padding: 0; on the ul


#5

hey thanks that worked! would you mind explaining to me why I needed to specify the padding as 0px? I didn’t create paddding for that element so why would it be automatically generating padding?


#6

It is the default browser style given to the ul element, it makes more sens when you think of it as a bullet list, the padding serves as indentation. This is why a lot of people use a css reset.


#7

I had no idea, I don’t think they explained that in the curriculum, thanks for the explanation! I would have never figured that out myself lol.


#8

My advice is you should learn to use the browser inspector tool in order to see how elements are shaped with padding, margin.
And at the same time, you can test right away whatever you’re trying to style them.
Chrome inspector
Firefox inspector


#9

You will become very accustom and aware of the default styles pretty early into learning this stuff, especially padding and margin on elements.

Many use a simple reset like this at the top of the css to just remove all margin and padding from all elements.

* {
  margin: 0;
  padding: 0;
}

Side note: I really wish FCC would introduce the developer tools right at the beginning. It is super easy to spot issues by just inspecting the page. The live feedback you get is invaluable, you can try things out right there in the browser without having to write anything to file. You can pretty much code a page just using the dev tools.

I can’t imagine doing any work without using the dev tools, it is just something you can’t live without once you know about it.

https://www.youtube.com/results?search_query=Google+Chrome+Developer+Tools


#10

Good luck, i just got done with this project! https://codepen.io/stevehl25/pen/xavKpr

It was def a little tricky but not too bad. I notice you still have to set up your media query breakpoint! :slight_smile: