Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Fedor Andreev
Fedor Andreev
6,438 Points

How to remove the white space?

I managed to remove the white space around my header. So, my header is perfectly aligned to the top left corner and there is no white space between the header element and the end of the page. I am talking about the negative space.

However, when I added the fixed position to my header, it follows when I scroll down, which is what I want. But when I added a fixed position, the white space is back.

I want to keep the fixed position on my header but remove the white space. Is there anyway to do this? The fixed position can be found under, 'Main Header'.

```<!doctype html> <head> <meta charset="utf-8"> <title>Red</title> <link rel="stylesheet" href="CSS/Main.css"> </head> <header> <div class="Header"> <div class="Red"> <a href="Index.html" id="Red">Red</a> </div> <div class="Blue"> <a href="Blue.html" id="Blue">Blue</a> </div> <div class="Green"> <a href="Green.html" id="Green">Green</a> </div> </div> </header> <body> <ul> <li><img src="img/Red.jpg" alt="Red" id="RedPicture"> <p>The Color Red </p> </li> <li><img src="img/RedArt.jpg" alt="RedArt" class="RedArtPicture"></li> <li><img src="img/Food.jpg" alt="Food" class="FoodPicture"></li> <li><img src="img/Lobster.jpg" alt="Lobster" class="LobsterPicture"></li> </ul> </body>

</html>

/******************
REMOVED WHITE SPACE
******************/
html, body {
    padding:0;
    margin:0;
}

/******************
    MAIN HEADER
******************/
.Header {
    background-color: black;
    height: 100px;
    width: 1000px;
    opacity: 0.9;
    position:fixed;

}

a {
    font-size:50px;
    text-decoration: none;
    color:black;
}

/******************
    RED HEADER
******************/

.Red {
    background-color:red;
    height:80px;
    width:300px;
    margin:1%;
    margin-left:3%;
    border-radius:20px;
    position:absolute;

}

#Red {
    display: block;
    text-align: center;
    line-height: 80px;
}


/******************
    BLUE HEADER
******************/

.Blue {
    background-color:blue;
    height:80px;
    width:300px;
    margin-top:1%;
    margin-left:34%;
    border-radius:20px;
    position:absolute;
}

#Blue {
    display: block;
    text-align: center;
    line-height: 80px;
}
/******************
    GREEN HEADER
******************/

.Green {
    background-color:green;
    height:80px;
    width:300px;
    margin-top:1%;
    margin-left:65%;
    border-radius:20px;
    position:absolute;
}

#Green {
    display: block;
    text-align: center;
    line-height: 80px;
}


/******************
 RIGHT-SIDE IMAGES
******************/

img {
    height:250px;
    width:300px;
}

ul {
    text-align: right;
    list-style-type: none;
    position:relative;
}

/******************
 TEXT UNDER IMAGES
******************/
p {
    font-size: 25px;

}

2 Answers

Fedor Andreev
Fedor Andreev
6,438 Points

I can fix this problem by giving the HTML and body in CSS a margin-top:-8px; . But I don't like this solution, I prefer solutions that are more "SOLID". Or is this way acceptable?

If you're using a position: fixed you can use the offset properties top, bottom, left, and right. In this case top: 0 will put it at the top of the page.You can use these with anything except static I believe.