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 Adding Pages to a Website Add Iconography

Posted by seth hinkle
seth hinkle
1,090 Points

My Contact Detail H3 is to the left, so are my contact links, I used text-align to fix my links, but my header won't.

/********** GENERAL **********/

body { font-family: 'Volkhov', serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; background: #f2ff0f; }

/* links */ a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; color: #000; }

/********** HEADING **********/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Niconne', cursive; margin: 15px 0; font-size: 15.25em font-weight: normal; }

h2 { font-family: 'Volkhov', serif; font-size: 1.00em; margin: -5px 0 0; font-weight: normal; }

/********** NAVIGATION **********/

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

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

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

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

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

/****************** PAGE: PORTFOLIO ******************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #444; color: #df0; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #f3f315; }

/****************** PAGE: ABOUT ******************/

.profile-photo { display: block; clear: both; max-width: 0 auto 30px; border-radius: 95px; }

/****************** PAGE: CONTACT ******************/

.contact-info { list-style: none; text-align: center; padding: 0; margin: 0; font-size: 0.9em; }

/********** COLORS **********/

/* site body */ body { background-color: #888; color: #f3f315; }

/* green header */ header { background: #000; border-color: #222; }

/* nav background on mobile */ nav { background: #333; }

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

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

/* selected nav link */ nav a.selected, nav a:hover { color: #eeef55; }

p { color: #000; }

This is my main.css

And this is my contact.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Seth Hinkle | Designer></title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Niconne|Cantarell:400,700italic,400italic|Bilbo' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Volkhov:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <div> <body> <header> <a href="index.html" id="logo"> <h1>Skare Krow Design Inc</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contacts</a></li> </ul> </nav> </header> <section id="wrapper"> <h3>General Information</h3> <p>I am currently engaged in a web development training program, but I will gladly get back to anyone with questions about pieces I have done or could do. So please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter, Facebook, and email are the fastest way to reach me.</p> </section> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:971-361-0888">971-361-0888</a></li> <li class:"mail"><a href="mailto:skare.krow81@gmail.com">skare.krow81@gmail.com</a></li> <li class:"twitter"><a href="http://twitter.com/intent/tweet?screen_name=skrow81">@skrow81</a></li> </ul> </section> <footer> <a href="http://twitter.com/skrow81"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/seth.hinkle2"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© Seth Mosby Hinkle.</p> </footer> </body> </div> </html>

I used text-align in my .contact-info to align my contact links, because they go to the left of the page when not aligned. But my Headline is still to the left. Can anyone help me?

2 Answers

Melissa Wheeler
Melissa Wheeler
6,306 Points

on a second look I noticed you aren't using a div. that is were you id selector for your wrapper should be, the div will enclose all you sections and your footer. Try adding this to you html and see what that does. This is my final code for the contact page from this course. If you are still having problems I'd go back to the video and see what exactly Nick is having you do in regards to the CSS. You can often times do the same thing multi ways with CSS and I don't want to get away from the basic building blocks that nick is giving you. Good luck

<div id="wrapper">
      <section id="primary">
        <h3>General info</h3>
        <p>General info about contacting me</p>
        <p>More info about contacting me</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@exmple.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" atl="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" atl="Facebook Logo"  class="social-icon"></a>
        <p>&copy; 2014 Melissa Wheeler.</p>
      </footer>
    </div>
seth hinkle
seth hinkle
1,090 Points

Thanks! I see where I was messing up now with the div. That really helped me out! :-)

Melissa Wheeler
Melissa Wheeler
6,306 Points
Melissa Wheeler
Melissa Wheeler
6,306 Points

Hey there, First of all in your html under you contact details H3 you 2nd and 3rd list item's syntax is wrong. Your first list item is correct the other two should look like that one, class="mail" and class="twitter" not class:"mail" and class:"twitter". You'll notice the orange quotations that means there's an error.

<h3>Contact Details</h3>
      <ul class="contact-info">
        <li class="phone"><a href="tel:971-361-0888">971-361-0888</a></li>
        <li class="mail"><a href="mailto:skare.krow81@gmail.com">skare.krow81@gmail.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=skrow81">@skrow81</a></li>
      </ul>

Second, the only H3 I see in your CSS is for your section that has the wrapper, which is only going to apply to your general information H3 it won't apply to your contact details H3 because this section doesn't have the class wrapper. So make sure you either target your header directly or give it a class of it's own so you can target the whole section.

See if that helps and let me know if your still having trouble.

seth hinkle
seth hinkle
1,090 Points

Can you give me an example of to accomplish that?