[Solved] Margin apears without being put into the CSS

[Agt001]

Ok, i have a problem (obviously :lol: ).
The thing is that on my layout i see a margin which i didn’t declare anywhere in the css document.

I have a main div (wrapper), which is centered and has padding 20px both on left and right side… But, on the right side i see 40px of extra space, and Chrome’s Inspect Element Tool on the Computed style shows a margi of 40px.

Maybe the div clear is causing problems… Can you check it out and suggest a solution. Here is the page code, as well as the css.

Page:

Code:

• Home
• About
• Blog
• Cont

CSS:

Code:

/*
Theme Name: Nesto
Version: 1.0
Author: The2MD
Author URI:
Tags: blue, gray, fixed-width
Description: Simple portfolio theme, first version.
*/

* {
font-family: arial;
outline: 0;
padding: 0;
margin: 0;
border: 0;
text-decoration: none;
vertical-align: baseline;
white-space: normal;
}

ul {
list-style-type: none;
}

ol {
list-style-type: decimal;
}

.clear {
clear:both
}

body {
background: #333;
}

.wrapper {
background:url(images/noise.png);
width:1000px;
margin-left:auto;
margin-right:auto;
padding-top:100px;
padding-left:20px;
padding-right:-80px;
}

.header {
width:960px;
float:left;
}

.header-logo {
background:url(images/logo.png) top right no-repeat;
width:648px;
height:100px;
float:left;
}

.menu {
background:#35b5f7;
width:648px;
float:left;
clear:left;
}

ul.menu {
padding:0px;
}

ul.menu li, ul.menu li a {
display:inline;
color:#fff;
font-weight:bolder;
text-transform:uppercase;
letter-spacing:-2px;
font-size:40px;
margin-right:3px;
}

ul.menu li a:hover{
background:#333;
}

.menu-shadow {
background:url(images/menushadow1.png) center no-repeat;
height:27px;
}

.header-right {
background:url(images/t.png) center no-repeat;
float:right;
margin:0px;
width:300px;
height:219px;
}

.header-right:hover {
background:url(images/t-over.png) center no-repeat;
}

.content-wrapper {
width:960px;
float:left;
}

.content {
background:url(images/darknoise.png);
float:left;
width:648px;
height:300px;
}

.sidebar {
background:url(images/darknoise.png);
float:right;
width:300px;
height:300px;
}

.footer {
background:url(images/darknoise.png);
float:left;
margin-top:15px;
width:960px;
height:300px;
}

[TheDoc]

Do you have a link to the page?

[Agt001]

http://gleforu.com/djb/index.html

Also, one more question, regarding the ul. Why isn’t the whole are covered with gray on hover (thin blue line stays)…

[TheDoc]

Make your wrapper width 960px instead of 1000px.

On the <li>, instead of display: inline; try float: left;. That seems to take care of the little border on top.

[Agt001]

The solution to the first problem was to reduce the width of the wrapper from 100px to 960px…

And the float:left thingy also helped Thanks…

[Author]

Posts