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

CSS How to Make a Website Customizing Colors and Fonts Pick Fonts and Set Relative Units

Posted by Amon Dow III
Amon Dow III
4,086 Points

My header border does not extent across the full top screen like nick header border i need help

My green border does not extent along the full webpage like in the video for some weird reason is inserting a small space along the two edges i believe my code is the exact same here here is my code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Amon First Website | Construction Profolio </title>
        <link rel="stylesheet" href="css/normalize.css">
        <!--This is a comment. this customize font link must go before the main code-->
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' 
        rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
            <a href="amonindex.html"id="logo">
            <h1>Amon Dow</h1>
            <h2>Designer</h2>
            </a>


        <nav>
            <ul>
                <li>
                 <a href="amonindex.html" class="selected">Portfolio</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="Contact.html">Contact</a>
                </li>
            </ul>
        </nav>
        </header>
       <div id="wrapper">
        <section>
            <ul>
                <li>
                <a href="img/numbers-01.jpg"  alt="">
                <img src="img/numbers-01.jpg" alt="">
                <p>Experimentation with color and texture</p>
                </a>
               </li>

               <li>
                <img src="img/green-frog.jpg" alt"" >
                <p>Blah</p>
               </li>
                <li>
                <a href="img/numbers-02.jpg" >
                <img src="img/numbers-02.jpg" alt="">
                <p>Blah</p>
                </a>

                <li>
                <a href= "img/numbers-06.jpg" >
                <img src="img/numbers-06.jpg" alt="">
                <p>Blah</p>
               </a>

                <li>
                <a href="img/numbers-09.jpg">
                <img src="img/numbers-09.jpg" alt="">
                <p>Blah</p>
                </a>
                <li>
                <a href="img/numbers-12.jpg">
                <img src="img/numbers-12.jpg" alt="">
                <p>Blah</p>
                </a>
                <p>
                    Gallery will go here
                </p>
            </ul>
        </section>

        <footer>
            &copy; 2015 Amon Dow III.
        </footer>
    </div>
    </body>
</html>```
```css
/*General  Notes Style Apply to whole page layout
 *
 *
 */

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}
a {
    text-decoration: none;
}
/*******************************Heading************************************************/

#logo {
    text-align: center;
    margin: 0;
}

h1{
    font-family:'Changa One', sans-serif;
    margin: 15px 0;
    font-size:1.75em;
}
/************************************Color********************************************/
/********************************* body site********************************************* */
body {
    background-color: #fff;
    color: #999;
}

/********************************Header************************************************
 *
 *
 */


/* green header */
header {
    background: #6ab47b;
    border-color: #599a68;
    padding:0;
    margin:0;

}
    nav {
    background: #599A68;
}


/*header backgound color for text */
h1, h2 {
    color: #fff;
}

/*links*/
a {
    color: #999;
}

nav a {
    color: #fff;

}

nav a:visited {
    color: #fff;
}
/* selected nav links */
nav a .selected, nav a:hover {
    color: blue;
}```

2 Answers

Benjamin Payne
Benjamin Payne
8,142 Points
Benjamin Payne
Benjamin Payne
8,142 Points

Hey Amon, One thing I notice right off the bat is that the doctype should be just html. Below is a HTML5 valid setup from emmet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

This is by no means a 'be all end all' but the old html4 doctype you have above should be updated.

I can't see where you have a width set for the nav element so try adding the following code to your css.

nav { 
    display: block;
    width: 100%;
}

Let me know if that helps,

Ben

Amon Dow III
Amon Dow III
4,086 Points

I try inserting the code in my css but it did not work And i am using aptana studio3 so how would you update it to html5

Amon Dow III
Amon Dow III
4,086 Points

i tried adding inserting the code into my css file and it did not work but how to i update the version to html5 i using aptana studio3

Amon Dow III
Amon Dow III
4,086 Points

i tried adding inserting the code into my css file and it did not work but how to i update the version to html5 i using aptana studio3

Amon Dow III
Amon Dow III
4,086 Points

i tried adding inserting the code into my css file and it did not work but how to i update the version to html5 i using aptana studio3

Christopher Sea
Christopher Sea
3,726 Points
Christopher Sea
Christopher Sea
3,726 Points

Not sure, but maybe the alt"" after the green-frog.jpg is causing a problem. should be alt=""