Empty Space is doing my head in

[kiwis]

Really simple, here is my HTML and CSS.. my page has a approx 10px white space at the top, why?

[code]html{
margin:0px;
padding: 0px;
color: white;
}

.black-bar{
top: 0px;
width: 100%;
background-color: black;
height: 33px;
}

.black-bar-container{
margin: 0px auto;
width: 1000px;
line-height: 33px;
}

.black-bar-container ul{
text-align: right;
}
.black-bar-container li{
color: #CCC;
text-transform: uppercase;
display: inline-block;
margin: 0px 10px;
font-size: .7rem;
}

.container{
background-image: url(“../images/blank2.jpg”);
width:100%;
height:100vh;
background-repeat: no-repeat;
background-size: cover;
background-position-y: center;
}

.header{
height: 118px;
border-bottom: solid 1px rgba(255, 255, 255, 0.75)
}
[/code]

[code]

• Balance
• Date
• Sim Status

• Head Office

[/code]

[Paulie_D]

We’d need a demo in Codepen.io or JSFiddle.net to see this properly. There’s not much we can tell from isolated HTML & CSS.

But my first question is, “did you remove all margin and padding from the body?”

[kiwis]

https://jsfiddle.net/kiwis/4psa3t5d/

[Paulie_D]

Oh, I see… you didn’t reset the margins on the ul to 0.

I’d sugegst a good “css reset”.

[vulkanus]

Hi

Add margin: 0; on this:

.black-bar-container ul{
text-align: right;
margin: 0;
}

https://jsfiddle.net/0p7vm35z/

[Author]

Posts