Hello. I am working on the capstone project and am having difficulty with there being extra horizontal space out side of the border of my page. i would like for the page to fit to screen. Can anyone please point me in the direction of what I need to adjust. A clue…
Has to do with the width of your div with class learning-words. 75% is too wide making it go over the screen width and causing overflow.
Btw I noticed there is only one element with class learning-words, a class implies there are multiple elements that require the same styling. If there is only one instance, use and id tag instead.
Are you sure this is true ? I have learned to only use classes unless i am for certain a element can only be used once.
Also a class does not implie that there are multiple elements with that styling. It only implies that there could be multiple elements with that styling.
Changing something to id because it is only used once at “that” moment is risky cause later you might need to change it back. Gets even worse when there is also javascript attached to the id.
Beside’s other developers that work with your product can’t use that styling since it would be an id and not a class.
you mentioned that I was only using one element under the class learning-words. Are you saying that since I only used that way of styling once throughout the styling page that I should use an ID vs class instead?
Well there seem to be different opinions on the matter, read @biirra’s post above.
Whether you use a class or an id tag doesn’t really matter since the result is the same. However with a class you can style multiple elements and with an id tag only 1.
Therefore I personally use id tags for those items where I need to specifically style it. And I use classes if I know a certain styling will be applied to multiple elements. But that’s my personal taste and ‘style’ I guess. BTW That doesn’t mean you can’t use both on a single element.
This is because your body has a set default margin. If you want to maintain the white space left and right of your grey border but want the top to be flush with the screen give your body a margin-top of 0.
Your border is not running all the way down due to your h1 text in the start-container. It has a default margin-top. Once again give that particular element a margin-top of 0 and you are good to go.
Thank you. That makes sense now. I was trying margin-top in all the other elements and boxes but didn’t think to do those. Happy to know I wasn’t too far off. Thanks again
Are you familiar with the inspector? When viewing the page in pretty much any browser you can do right-click -> inspect element, which opens the inspector. You can scroll through each element and see the margins and padding visualized on screen.