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

HTML How to Make a Website Customizing Colors and Fonts Resize Text

Mauricio Prieto
Mauricio Prieto
1,055 Points
Posted by Mauricio Prieto
Mauricio Prieto
1,055 Points

My header does not extend to cover the full length of the website

I've been writing my code following Nick's instructions in the videos,but for some reason my header does not cover the full length of the website. Instead it shows as rectangle in the middle with blank spaces on the sides

Mauricio Prieto
Mauricio Prieto
1,055 Points
Mauricio Prieto
Mauricio Prieto
1,055 Points

Here is my code so far '''html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mauricio Prieto | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://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="index.html" id="logo">
    <h1>Mauricio</h1>
  </a>
   <nav> 
    <ul> 
      <li><a href="index.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">
        <img src="img/numbers-01.jpg" alt="">
        <p>Experimentation with color and texture</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Experimentation with color and texture</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p>Experimentation with color and texture</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>Experimentation with color and texture</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>Experimentation with color and texture</p>
        </a>
      </li>
    </ul>
  </section>
  <footer>
    <p>&copy; 2015 Mauricio Prieto.</p>
    <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
    <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
  </footer>
  </div>
</body>

</html> '''

Mauricio Prieto
Mauricio Prieto
1,055 Points
Mauricio Prieto
Mauricio Prieto
1,055 Points

'''css /************************* GENERAL **************************/ body{ font-family: 'Open Sans',sans-serif; }

wrapper{

max-width: 940px; margin: 0% auto; padding: 0 5%; background: #fff; } 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; font-weight: normal; line-height:0.8em; }

h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; } /************************* NAVIGATION **************************/

nav{ text-align: center; padding:10px 0; margin:20px 0 0; }

/************************* FOOTER **************************/

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

/* site body*/ body{ background-color: #fff; color: #999; }

/green header/ header{ background: #6ab47b; border-color: #599a68; }

/logo text/ h1, h2 { color: #fff; }

/links/ a { color:#6ab47b; }

/nav backgroung on mobile devices/ nav{ background:#599a68; }

/color for nav link/ nav a,nav a:visited{ color: #fff;

}

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

} '''

2 Answers

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points
stjarnan
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

Hi Mauricio! It seems that your head isn't complete, which might cause the problems you are experiencing. Try to compare with this: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Your page title</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Your name</h1>
        <h2>Role</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.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">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; copyright information</p>
      </footer>
    </div>
  </body>
</html>

Do you see how you need to use a head tag to contain your links to the css etc? And if you insert the head and complete all the tags, does that fix it for you?

Good luck!

Mauricio Prieto
Mauricio Prieto
1,055 Points
Mauricio Prieto
Mauricio Prieto
1,055 Points

Thank you for answering, but I do have it on my workspace code. The weird thing is that I just tried to write a reply showing you just the code that I wrote using the <head> tag,but it's not showing.

<head> <meta charset="utf-8"> <title>Mauricio Prieto | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://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> Even if I write "head" within <> on this comment it disappears for some reason.

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

seems like this might be your problem:

./ logo { text-align: center; margin: 0: } ./

try this instead:

./ logo { text-align: center; margin: 0; } ./