How to make a navigation bar in html/css that has no space with the rest of the page?

Question

I am creating a website as a portfolio to present my path in IT but my problem is that my navigation bar has a space between the bar in itself and the rest of the page

I've tried using border,margin,width but none worked

body {
    background-color : #B31854;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #900C3F;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///F:/Site%20web/Exemple%20css.css">
<style>
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#accueil">Accueil</a></li>
  <li><a href="#monparcours">Mon Parcours</a></li>
  <li><a href="#mesprojets">Mes Projets</a></li>
  <li><a href="#contact">Contact</a></li>

</ul>



<center><h1>Bienvenue sur mon portfolio !</h1></center>




</body>
</html>

The expected result is something like the following website navbar : http://axel-chapelain.com/

the actual result is like : https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

aloisdg · Accepted Answer · 2019-09-09T15:01:28.423

I think you are looking to erase the default margin of body. Try to reset it with:

body {margin:0;}

Add the rule to the top of your css.

Demo:

body {
    margin: 0; /* reset happened here */
    background-color : #B31854;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #900C3F;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///F:/Site%20web/Exemple%20css.css">
<style>
</style>
</head>
<body>
<ul>
  <li><a class="active" href="#accueil">Accueil</a></li>
  <li><a href="#monparcours">Mon Parcours</a></li>
  <li><a href="#mesprojets">Mes Projets</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<center><h1>Bienvenue sur mon portfolio !</h1></center>
</body>
</html>

Beside, you may want to reset more defaults. See CSS Tools: Reset CSS. More information on Stack Overflow: CSS reset - What exactly does it do? or How wide is the default <body> margin?.

If you look into the source code you will find:

html, body { /* I cut a lot of tags here */
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Instead of full reset, you may want to normalize your css across browser. Check Normalize.css

If you look into the source code you will find:

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

I think it is worth mentioning that another working solution would be to add a negative margin to a wrapper wrapping your whole html. Please dont do that. Nobody wants to deal with this kind of hacky workaround. Dont fight the browser ; reset it.

score 0 · Answer 2 · answered Sep 09 '19 at 12:30

Try this code:

body {
        background-color : #B31854;
    }


ul {
  list-style-type: none;
  overflow: hidden;
  background-color: #900C3F;
}

li {
 position:relative;
 float:left;
 left: 25%;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}

score 0 · Answer 3 · edited Sep 09 '19 at 13:18

0

I added margin to your nav. Please see the ul class in your styles. I gave a margin-top -10 so it just goes up 10pixels the same as margin-left.

body{
    width: 100%;
}

    ul {
    margin-top: -10px;
    margin-left: -10px;

  list-style-type: none;
  overflow: hidden;
  background-color: #900C3F;
    }

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #740A33;
}


h1 {
    font-family : Schluber;
    color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;

}

your welcome :)

edited Sep 09 '19 at 13:18

Aedvald Tseh

1,757
16
31

answered Sep 09 '19 at 12:39

Remy Baas

1
3

Please explain what was done wrong in the original post and how you solution fixes the issue. – Aedvald Tseh Sep 09 '19 at 12:55
i added margin to your nav , #see the ul class in your styles. gave a margin-top -10 so it just go 10pixels up same with margin-left – Remy Baas Sep 09 '19 at 13:08
@RemyBaas Please dont do that. Check [my answer](https://stackoverflow.com/a/57854091/1248177). Dont fight the browser ; reset it. – aloisdg Sep 09 '19 at 14:44
@aloisdg yes that works to, but if you want to use margin elsewhere on the page ,then its not gonna work, because he's constantly gonna reset it – Remy Baas Sep 09 '19 at 14:52
@RemyBaas if you want margin somewhere just use margin. [Reset](https://meyerweb.com/eric/tools/css/reset/) and [Normalize](http://necolas.github.io/normalize.css/) CSS are built for this exact scenario. – aloisdg Sep 09 '19 at 14:58

How to make a navigation bar in html/css that has no space with the rest of the page?

3 Answers3