I am creating a vertical nav bar but I have this extra space at the beginning of each row and I can’t figure out what I am doing wrong.
Any help would be appreciated.
Thanks
cara (codepen.io)
I’m not exactly sure what extra space you are referring to. Can you be a little more specific.
You do have some issues with your HTML though. For example, you are missing end tags, such as </li> on almost every list item. Also, you don’t want to include the <body> tag in codepen. It is assumed that everything you put in the HTML editor goes inside <body> and thus codepen adds it for you. I would suggest you run the codepen HTML analyzer to help you find all of your issues.
Thank you for looking at my code, I analyzed the code and made all corrections. I can’t figure out how to get rid of the vertical space running to the left of the tabs.
Long story short, that is padding that your browser added by default (most browsers add left padding to a list). So you just need to set padding-left: 0 on the list to get rid of it.
Are you familiar with your browser’s dev tools? If not you should get acquainted because it will be your best friend. Move your mouse over that list, right click, and choose “Inspect”. In the new window that pops up select the Inspector tab at the top. It will show your HTML and hopefully should be highlighting your list (or an element within it). Move the dev tools window so you can see both it and that list on your page. Now move your mouse over the <ul> and watch what happens on your page. You should see the list being highlighted and that space to the left should be highlighted a different color, which represents the padding that the browser is adding.
So anytime you have weird spacing issues you can use the inspector to figure out which element is causing it.
Also, it is a common practice to use a CSS reset in order to get rid of all the default CSS that browsers add to the page. This is just a small CSS file you add before any other CSS. But of course there are several different ones to choose from and some of them do a lot more than others (they are “opinionated”). Just google “CSS reset” and you’ll find more choices than you know what to do with.
You gave me such needed information. Thank you!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.