Tell us what’s happening:
I cannot figure out how to extend the borders on my index to the left side of the viewport. It seems like margin-left: should do it, but there is no effect.
Why is there a white border around the body of my page?
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.
Link to the challenge:
body has default margin and ul has default padding that you will need to override
How can I do that? I tried padding-left: none; but that had no effect.
For your second question,it’s actually not a white border, just extra whitespace.
body {
margin: 0;
}
Margin refers to the “space” outside the box, so by setting it to 0 you’ll be able to “shift” the whole body element up.
Could you rephrase your first question? Are you referring to the green border or gray border?
yes, the green border. I am working on it now, and added negative margin to the left side. This seems to have worked but Im left feeling there is a cleaner way.
also, margin: 0; doesnt have an effect. presumably because ive complicated it somehow.
padding:0; I don’t think none works in this case
see base example of styling ul for navigation
thank you for the response, and the guide.
btw, where do you get the “filler text”? Its probably a better option than mashing the keyboard like in my project.
edit: I have another question. how do you add line breaks within the “code” element? in freecodecamps example, “code” seems to adhere to their line breaks but mine displays a straight line
You can use an online Lorem Ipsum generator…
…or some editors have a generator plug-in
The short answer is find a page that has code displayed how you like and use DevTools to peek at their solution
Generally you use the <pre> and the <code> tags together. The pre tag has lots of css style options to help you dial in what you want to display. Seek out a current online article or tutorial on this.
There are also some cool javascript libraries available to give you detailed control over how your code displays and highlight syntax just like in an editor.
https://prismjs.com/
I see. I was trying to use only html and css since that’s all I have learned so far. I will keep these resources in mind though.
Just stick with pre and code tags and you’ll be fine. The syntax highlighting is probably beyond your needs for this project.
yes, adding pre before my code element is exactly what I was looking for!