Remove left padding css

Question

I am trying to create a simple fixed navigation bar, but there is a white margin/padding down the left of the computer screen that I can't figure out how to get rid of.

CSS:

#menu-bar {
  padding-left: 0px;
  padding-right: 110px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 35px;
  text-align: center;
  padding-top: 15px;
  background-color: #333;
}
#menu-bar a {
  font-size: 14px;
  padding-left: 15px;
  padding-right: 15px;
  color: white;
  text-decoration: none;
}
#menu-bar a:hover {
  color: grey;
}

HTML:

<div id="menu-bar">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>

Please add a working sample, it would help us to see what's happening.. — miguelmpn, Feb 18 '16 at 14:18

solimanware · Accepted Answer · 2018-01-10T04:37:55.513

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.

So, You can Reset/Normalize your css by adding this code:

html,
body {
  margin: 0;
  padding: 0;
}

But if you have a large project and want complete restting use normalize.css. It resets a lot of default values to be consistent across browsers. Good Luck ^_^!

j08691 · Answer 2 · 2016-02-18T14:20:29.330

0

You need to remove the default margin on the <body> element:

#menu-bar {
  padding-left: 0px;
  padding-right: 110px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 35px;
  text-align: center;
  padding-top: 15px;
  background-color: #333;
}
#menu-bar a {
  font-size: 14px;
  padding-left: 15px;
  padding-right: 15px;
  color: white;
  text-decoration: none;
}
#menu-bar a:hover {
  color: grey;
}
body {
  margin:0;
}

<div id="menu-bar">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>

edited Feb 18 '16 at 14:20

answered Feb 18 '16 at 14:19

j08691

204,283
31
260
272

I don't see why you need to remove default margin as it's `fixed` positioning – Pogrindis Feb 18 '16 at 14:20
1

@Pogrindis - Since there's no left position specified on the fixed element, the body's default margin will still effect the layout. – j08691 Feb 18 '16 at 14:21
agreed, but I would just be more inclined to apply a `left:0;` instead of manipulating a parent, the padding on the body is somewhat expected. – Pogrindis Feb 18 '16 at 14:22
@Pogrindis However by only changing the left position of the menu bar, the rest of the page will still be affected by the body's margin, which would then make everything out of alignment. Your suggestion is valid, but it also depends on the rest of the OP's layout. – j08691 Feb 18 '16 at 14:25

score 0 · Answer 3 · answered Feb 18 '16 at 14:21

Just add margin: 0; to the body to remove its default margin style. Example below:

body{
   margin:0;
}
#menu-bar {
  padding-left: 0px;
  padding-right: 110px;
  margin: 0 auto;
  position: fixed;
  top: 0;
  width: 100%;
  color: #ffffff;
  height: 35px;
  text-align: center;
  padding-top: 15px;
  background-color: #333;
}
#menu-bar a {
  font-size: 14px;
  padding-left: 15px;
  padding-right: 15px;
  color: white;
  text-decoration: none;
}
#menu-bar a:hover {
  color: grey;
}

<div id="menu-bar">
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>

score 0 · Answer 4 · edited May 23 '17 at 10:32

0

It's most likely default margin on the body. You can set this to 0 with the following:

html, body {
  padding: 0;
  margin: 0;
}

See here for more information

edited May 23 '17 at 10:32

Community

1
1

answered Feb 18 '16 at 14:21

kinggs

1,162
2
10
25

Remove left padding css

4 Answers4

Linked