Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Brack Slater
Brack Slater
2,144 Points

White border

I have a white border that goes all around my website and i cannot figure out why it will not go away. I've tried getting rid of the html and body margin and padding and cant get it to go. Where should i look next?

3 Answers

David Morisset
David Morisset
13,323 Points
David Morisset
David Morisset
13,323 Points

Hello. It is not easy to find a problem without having access to the code or the site, but i'll try anyway.

Browsers apply some default styles to every element, and that includes margins. A good way to reset all styles to 0 is to include a CSS reset to your stylesheet. You should have a look at the most widely used CSS reset, copy the CSS at the beginning of your stylesheet and see if the problem still occurs.

If this doesn't solve the issue, please copy your code or give us access to your website so that we can have a look.

Hope this helps.

Brack Slater
Brack Slater
2,144 Points
Brack Slater
Brack Slater
2,144 Points

Page Design

html { display: none; }

NAVAGATION

h1, h1{ display: none;

}

logo {

text-align: center; margin: 0; }

nav ul { list-style: none; text-align: center; }

nav li { display: inline-block; padding-left: 0px; /* border-right: black solid 2px;*/ padding-right: 10px; margin: 10px 10px 10px 0; }

header { background-color: black; padding: 0; }

a { text-decoration: none; color: red; }

a:hover { color: red; }

nav { text-align: center; background: #ccc; }

/*************************************************/

body, html { margin: 0; padding: 0; }

.folio, .about { border-right: black solid 2px; padding-right: 15px; }

footer { font-size:0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

nav a.selected, nav a:hover { color: #32673f; }

Brack Slater
Brack Slater
2,144 Points
Brack Slater
Brack Slater
2,144 Points

<!DOCTYPE html> <html> <head> <title>Brack Slater | Developer</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Brack Slater</h1> <h2>Developer</h2> </a> <nav> <ul> <li><a href="index.html" class="folio">Portfolio</a></li> <li><a href="about.html" class="about">About</a></li> <li><a href="contact.html" class="Contact">Contact</a></li> </ul> </nav> </header> <div> <footer> <a href="https://twitter.com/BrackSlater"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/brack.slater"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>Ā© 2016 Brack Slater.</p> </footer> </div> </body> </html>