CODEWITHSUNDEEP
htmlcss
Jaime Andres Moncayo
Jaime Andres Moncayo

Reputation: 3

HTML/CSS Navigation Bar Won't Reach Edge

New to CSS/HTML and ive been trying to create a navigation bar for a website project. However, I can't seem to get the navigation bar to reach the top/left/right edges. What am I doing wrong?

ul.header {
  list-style-type: none;
  margin: 0;
  Padding: 0;
  width: 100%;
  background-color:rgb(97, 23, 214);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;

}

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

li.header {
  float: left;

}

li.right {
  text-align: right;
}
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href=shell.css>
  </head>
<body>
  <ul class="header">
    <li class="header">Home</li>   
    <li class="header">About Me</li>
    <li class="header">Contact Me</li>
    <li class="right">JAIME<b>MONCAYO</b></li>
  </ul>    
  <h1> Lorem forem dorem amaculi laculi </h1> 
    <p class="header"> loret foret goret horet aboret </p>
</body>
</html>

Upvotes: 0

Views: 2384

Answers (5)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

The body tag has always a default style which gave him margin: 8px; this is what preventing you from reaching the edges, to solve it reset the body to margin: 0

/* Resetting the body margin */
body {
  margin: 0;
}

ul.header {
  list-style-type: none;
  margin: 0;
  Padding: 0;
  width: 100%;
  background-color:rgb(97, 23, 214);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

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

li.header {
  float: left;

}

li.right {
  text-align: right;
}
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href=shell.css>
  </head>
<body>
  <ul class="header">
    <li class="header">Home</li>   
    <li class="header">About Me</li>
    <li class="header">Contact Me</li>
    <li class="right">JAIME<b>MONCAYO</b></li>
  </ul>    
  <h1> Lorem forem dorem amaculi laculi </h1> 
    <p class="header"> loret foret goret horet aboret </p>
</body>
</html>

Upvotes: 1

IsuNas Labs
IsuNas Labs

Reputation: 146

Add the following code to your CSS.

*{
  margin:0;
  padding:0;
}
ul.header {
    list-style-type: none;
    margin: 0;
    Padding: 0;
    width: 100%;
    background-color:rgb(97, 23, 214);
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;

}

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

li.header {
    float: left;

}

li.right {
    text-align: right;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href=shell.css>
<ul class="header">
<li class="header">Home</li>   
<li class="header">About Me</li>
<li class="header">Contact Me</li>
<li class="right">JAIME<b>MONCAYO</b></li>
</ul>    
    <h1> Lorem forem dorem amaculi laculi </H1> 
</head>
<body>
<p class="header"> loret foret goret horet aboret </p>
</body>
</html>

It's gonna remove all the paddings and margins your HTML tags

Upvotes: 1

Kavindra
Kavindra

Reputation: 1707

Don't mix up the head and header. Your ul should be within the body tag.

 <!DOCTYPE HTML>
<head>
<link rel="stylesheet" href=shell.css>

<h1> Lorem forem dorem amaculi laculi </H1> 
</head>
<body>
    <ul class="header">
       <li class="header">Home</li>   
       <li class="header">About Me</li>
       <li class="header">Contact Me</li>
       <li class="right">JAIME<b>MONCAYO</b></li>
    </ul>    
    <p class="header"> loret foret goret horet aboret </p>
</body>
</html>

Upvotes: 0

Sugata Bhar
Sugata Bhar

Reputation: 29

The browser adds some css which has to be reset. Best to use Twitter Bootstrap for the purpose, but that will introduce some complexity.

So for the time being just this piece of CSS code will do. 

body {
 margin:0
}

Upvotes: 2

Milan Chheda
Milan Chheda

Reputation: 8249

head tag should only have scripts and styles. It cannot have ul or any other HMTL tags. Below is the updated code for you: 

* {
  margin: 0;
  padding: 0;
}

ul.header {
  list-style-type: none;
  margin: 0;
  Padding: 0;
  width: 100%;
  background-color: rgb(97, 23, 214);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

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

li.header {
  float: left;
}

li.right {
  text-align: right;
}
<ul class="header">
  <li class="header">Home</li>
  <li class="header">About Me</li>
  <li class="header">Contact Me</li>
  <li class="right">JAIME<b>MONCAYO</b></li>
</ul>
<h1> Lorem forem dorem amaculi laculi </H1>
<p class="header"> loret foret goret horet aboret </p>

Upvotes: 0

Related Questions