Hi,
it’s me again 
Have a problem with white margins/borders/paddings? I don’t have an idea because I set all on 0 and still got white frame around my web and white gaps between my sections. Help 
So when you say you’ve tried everything, have you opened the Developer Tools in the browser of your choice, and actually inspected the DOM nodes? As I drill down in each, I’m seeing some things that still have a padding or margin. I strongly suggest getting comfortable with using the element inspector in the developer tools, it will save you so much time.
Now, you say you set “all” on 0, which you did – for the body element. But the issue becomes nested tags have their own styles that, by default, will override those body styles. For example, h1 tags have a margin-top and -bottom that aren’t affected by you setting the margin on the body tag.
If you want to set a “default” style on all elements, you can always do a universal reset trick:
* {
/* This will match all tags, regardless -- but it has the lowest "weight" of the CSS
* selectors. Thus, styles applied here are setting a default for everything, which
* can then be overridden in more specific rules.
*/
font-family: 'Oswald', sans-serif;
width: auto;
height: auto;
padding: 0;
margin: 0;
border: 0
}
#nav-main{
/* From here, you can apply your styles as normal */
}
3 Likes
You change my perspective. Great advice! Now I almost got it 
That’s a trick I didn’t know! Thank you
It has actually been around a very long time. It was (and sometimes still is) considered hacky, as it completely replaces the browser defaults, but it works pretty slick from a design control perspective.
Read more about it here, rather than take my word for it.
But I have not been around so long
Thank you for the link
Line at the top in your case is result of ul in #nav-main overflowing. Because it is literally at top of the page, it adds that line. <ul> element in general tends to add new line before list stats, so I think this is what happens here.
No need to use * here, just:
#nav-main ul {
margin: 0px;
}
Will fix it, and just take a note that ul tends to do that for future.
It is better to know why something behaves some way and what is the source of the problem compared to just hacking with *.
Edit: to note, <p> elements do same thing. So watch out for <p> and <ul> in the future.
As I said, * is a hacky-ish solution, but is very common from a designers perspective. Creating a universal default set of styles is a very handy trick for ones toolbox, and is pretty common SOP in the web dev world.
Which sounds like “it may be hacky, but everybody’s doing it!” sigh…
Oh, I don’t mean it is bad or anything, I think using things like that is good. It just that you should not just focus on “tricks” before you actually know all the basics.
Like in this case where OP clearly do not know the basics (which is that ul will add line breaks before element), and would never learn it if he just “used some tricks”.
I just think basics are very important to establish.
1 Like
I totally agree. In this case, it was both the ul and the h1, and a lot of tags that have margin and/or padding by default.
It is a good idea to know a couple of things:
- Some elements will have a default, whether it be size, or margin, or whatever.
- Some elements will have a totally different default on another browser. Don’t expect Edge or Chrome to have the same style defaults.
2 Likes
This can be such a pain in the ass sometimes. When I was making my aggregator of FCC curriculum, I had bright idea of “why don’t we focus on content area each time navigation animation is played, so user can easy scroll after animation instantly”. And so I did that, and it was perfect.
Fast forward next day I finished it and did tests on firefox instead of chrome. And each time navigation was clicked, something finniky was happening, because it would do horizontal scroll, shifting whole page layout, and that is with horizontal scrollbars hidden even! So after each navigation button click on top, whole page will offset to left or right. It was so frustrating, I was sure that firefox somehow tries to “guess” where navigation button leads and scroll there without me telling it. It did not happen in chrome and I was lost on what is wrong with that. It even worked when I completely disabled all my own navigations! I was blown away and frustrated by firefox ability to predict where my buttons should lead. And then that line of code with “.focus()” hit my eyes.
Well, yeah, I am going off topic, I will just go continue working on my React.
1 Like
First set body {
padding: 0;
margin: 0;
}
That should take care of the website white borders for you 
I got curious about how old that universal selector “reset” actually is and apparently, it is all the way from 2004. Another style that is often used with the universal selector is box-sizing: border-box;
This version sets it on the HTML and everything inherits from it (info).
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
rofl researching the history of the reset-all thing, huh? I first read it in a first-edition book on CSS by Eric Meyer (here’s one of his posts on the subject). His were the books that introduced me to CSS Zen Garden, and the possibilities of CSS as a whole.
And yes, for those of you who are getting jaded about CSS, the whole conversation about the redundancy of CSS Zen Garden, I get it – but from an inspiration perspective, and from the view of “a new designer wanting to know the possibilities”, it’s AMAZING.
Dude Zen Garden is amazing. It has inspired so many people and showed the power of CSS. Its legacy will hopefully never die. I pretty much started with web development on a site where I did not have access to the HTML so everything had to be done just in the CSS. The magic of pseudo-elements came real handy, even if it was just to add some icons to the nav links.
I don’t remember when I first saw the reset but I haven’t actually been into web development for all that long, so it’s probably just a few years ago.
1 Like