delete left padding

hoven002 · 05-17-2012, 07:43 PM

Hi,

I have a basic structure and in that structure I have a menu with the tags <nav>, <ul> and <li>. Now is there a left padding (around 40px) on the <ul>. The strange thing is now, that I can't find the markup of that. I tried bugfire but that's not helping. Does anyone what is happening here?

The HTML code is:
[CODE]
<!DOCTYPE html> 

<html>
<head>
<meta charset="utf-8">
<title>TITEL</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles2.css">
</head>

<body>

<section> 

<header> 
<h1>LOGOTEKST</h1>
</header>

<nav> 
<ul>
<li><a href="#">nav01</a></li>
<li><a href="#">nav02</a></li>
<li><a href="#">nav03</a></li>

</ul>
</nav>

<article> 
<h2>KOP ARTIKEL</h2>
ARTIKEL
</article>

<footer> 
FOOTER
</footer>

</section> 

</body>

</html>
[CODE]

The CSS styling is:
[CODE]
@charset "utf-8";

html{
border: solid 1px red;
}

/* Article styles: */

section{
width: 960px;
height: 800px;
margin: 0 auto;
border: solid 2px orange;
}

header{
border: solid 1px blue;
}

ul{
list-style-type: none;
}

article{
float: left;
width: 650px;
border: solid 1px green;
}

/* Footer styling: */

footer{
float: left;
border: solid 1px yellow;
}
[CODE]

Regards,
Kenneth

dan-dan · 05-17-2012, 09:11 PM

HTML lists have padding by default. Simply override it:

Code:

ul{
list-style-type: none;
padding: 0;
}