Horizontal blank space though margin property is not set

Question

I ran into this problem while learning CSS. I tried to search for this but couldn't find any proper answers. Some lead me to margin collapsing, but it just doesn't happen to horizontal margins.

#nav-bar {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #be3144;
}

#nav-list {
  display: flex;
  margin-right: 4rem;
}

.nav-link {
  text-decoration: none;
  color: white;
  padding: 0 1.6rem 0 1.6rem;
  height: 60px;
  weight: 100%;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}

#welcome-section {
  background-color: #3a3d40;
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}

<nav id="nav-bar">
  <div id="nav-list">
    <a href="#welcome-section" class="nav-link">About</a>
    <a href="#tile" class="nav-link">Work</a>
    <a href="#contact" class="nav-link">Contact</a>
  </div>
</nav>

<section id="welcome-section">
  <h1>Hey I am Mimic</h1>
  <h4>a web developer</h4>
</section>

The #welcome-section below nav-bar has blank space both left and right sides, though I didn't set any margin properties. Also, any advices and suggestions in styling HTML/CSS are appreciated. Thanks in advance.

A few HTML elements have a default style; `body` is one of them (others include `p`, `h1`, `h2`, etc) - you'd need to override the body's margin to accomplish what you want. Notice that for the `nav` you are implicitly doing this by making a hard-positioned element (i.e. `top: 0`) — blurfus, Jan 09 '20 at 16:11
The body has a `margin: 8px`. You can remove it or just add `margin: 0 -8px;` to `welcome-section` — Amadou Beye, Jan 09 '20 at 16:13
Quick comment, when setting a numeric value on any attribute, you need to use a unit of measurement (i.e. `px`, `em`, etc) but if you are setting the value to zero, the unit of measurement is not required (since it becomes irrelevant) so you can simply say `margin: 0;` - this will save you a few bytes here and there on you CSS ;) — blurfus, Jan 09 '20 at 16:14

score 2 · Accepted Answer · answered Jan 09 '20 at 16:06

It's because the <body> of the page has margin as default.

Get rid of that by adding the below, and it should work...

body {
  margin:0;
}

body {
  margin:0;
}

#nav-bar {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #be3144;
}

#nav-list {
  display: flex;
  margin-right: 4rem;
}

.nav-link {
  text-decoration: none;
  color: white;
  padding: 0 1.6rem 0 1.6rem;
  height: 60px;
  weight: 100%;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}

#welcome-section {
  background-color: #3a3d40;
  height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}

<nav id="nav-bar">
  <div id="nav-list">
    <a href="#welcome-section" class="nav-link">About</a>
    <a href="#tile" class="nav-link">Work</a>
    <a href="#contact" class="nav-link">Contact</a>
  </div>
</nav>

<section id="welcome-section">
  <h1>Hey I am Mimic</h1>
  <h4>a web developer</h4>
</section>

The reason you do not see this on the nav bar is because it is a fixed element. If you set that to be relative you should see it will also show the margin. — Jason Is My Name, Jan 09 '20 at 16:10

Horizontal blank space though margin property is not set

1 Answers1