White space at the borders of element

Question

I'm learning CSS as try to build my own page, I found out that my all my element outside there are white borders, how do I remove them?

Below is my CSS code, I've tried with margin 0, it works for "Pick your language" but for the list items, it still has space around it.

#mainHeader {
  background: #3354FF;
  color: #FFFB33;
  margin: auto;
  overflow: hidden;
  text-align: center;
}

#pickLang {
  text-align: left;
  color: white;
  background-image: url('../Image/nightsky.jpeg')
}

#mainNAV {
  background: #33FFEE;
  color: #33FF4E;
}

#mainNAV ul {
  padding: 0;
  margin: auto;
  list-style: none;
}

#mainNAV li {
  display: inline;
  padding: 5px 10px;
}

#mainNAV a {
  text-decoration: none;
  color: black;
  font: 18px;
}

<header id="mainHeader">
  <h1> My Website</h1>
</header>

<body>
  <div id="index">
    <h2 id="pickLang">Pick a Language
      <h2>
  </div>

  <nav id="mainNAV">
    <div class="listItem">
      <ul>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">SQL </a></li>
        <li><a href="#">PYTHON</a></li>
      </ul>
    </div>
  </nav>

  <section id="midpart">
    <div class="container">
      <h1>This Page is to learn CSS and HTML</h1>
    </div>
  </section>

We need your HTML as well. Post a [mcve] please – j08691 Jul 08 '20 at 18:25 — j08691, Jul 08 '20 at 18:25
Need to change Margin & Padding of body & div. – Umesh Jul 08 '20 at 18:26 — Umesh, Jul 08 '20 at 18:26
ive updated my question, kindly find the html code – dragkin Jul 08 '20 at 18:48 — dragkin, Jul 08 '20 at 18:48

score 0 · Answer 1 · answered Jul 08 '20 at 18:25

0

Instead of margin: auto , try margin: 0;

answered Jul 08 '20 at 18:25

Leon Michalak

413
6
14

1

This should be a comment. Add more details to your answer – shuberman Jul 08 '20 at 18:40

score 0 · Accepted Answer · answered Jul 08 '20 at 18:54

By default, browsers assign margins to heading elements (e.g. h1, h2, h3,...). Just remove them like this:

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

#mainHeader {
  background: #3354FF;
  color: #FFFB33;
  margin: auto;
  overflow: hidden;
  text-align: center;
}

#pickLang {
  text-align: left;
  background-image: url('../Image/nightsky.jpeg')
}

#mainNAV {
  background: #33FFEE;
  color: #33FF4E;
}

#mainNAV ul {
  padding: 0;
  margin: auto;
  list-style: none;
}

#mainNAV li {
  display: inline;
  padding: 5px 10px;
}

#mainNAV a {
  text-decoration: none;
  color: black;
  font: 18px;
}

<header id="mainHeader">
  <h1> My Website</h1>
</header>

<body>
  <div id="index">
    <h2 id="pickLang">Pick a Language
    </h2>
  </div>

  <nav id="mainNAV">
    <div class="listItem">
      <ul>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">SQL </a></li>
        <li><a href="#">PYTHON</a></li>
      </ul>
    </div>
  </nav>

  <section id="midpart">
    <div class="container">
      <h1>This Page is to learn CSS and HTML</h1>
    </div>
  </section>

This works, thanks. 1 more question, my page most outer have a white borders around it. what is the element for the whole page? I've tried html{ padding:0; margin:0;} but doesnt works — dragkin, Jul 09 '20 at 14:28
Select the `body` instead of `html`. E.g. `body {margin:0;}` — j08691, Jul 09 '20 at 14:56

score -1 · Answer 3 · answered Jul 08 '20 at 18:59

USE THIS ONE- CSS

body{margin: 0; padding: 0; box-sizing: border-box;}

body{margin: 0; padding: 0; box-sizing: border-box;}
#mainHeader {
  background: #3354FF;
  color: #FFFB33;
  margin: auto;
  overflow: hidden;
  text-align: center;
}

#pickLang {
  text-align: left;
  color: white;
  background-image: url('../Image/nightsky.jpeg')
}

#mainNAV {
  background: #33FFEE;
  color: #33FF4E;
}

#mainNAV ul {
  padding: 0;
  margin: auto;
  list-style: none;
}

#mainNAV li {
  display: inline;
  padding: 5px 10px;
}

#mainNAV a {
  text-decoration: none;
  color: black;
  font: 18px;
}

<header id="mainHeader">
  <h1> My Website</h1>
</header>

<body>
  <div id="index">
    <h2 id="pickLang">Pick a Language     </h2>
  </div>

  <nav id="mainNAV">
    <div class="listItem">
      <ul>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">SQL </a></li>
        <li><a href="#">PYTHON</a></li>
      </ul>
    </div>
  </nav>

  <section id="midpart">
    <div class="container">
      <h1>This Page is to learn CSS and HTML</h1>
    </div>
  </section>
</body>

White space at the borders of element

3 Answers3