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

Carleen Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points
Posted by Carleen Hall
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points

My h3 is not lining up with my paragraph

Hi all

Can someone look at my code and tell me where I went wrong? The "About" <h3> tag is not lining up with the paragraph. Sorry but my code also looks really weird when I post it (jumbled) I have no idea why. Thanks!

    <head>
        <meta charset="utf-8">
        <title>Alicia Hall | Designer </title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Courgette|Lato:400,700" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
         <a href="index.html" id="logo">
           <h1>Carleen Hall</h1>
           <h2>Designer</h2>
         </a>
         <nav>
             <ul>
                 <li><a href="index.html">Portfolio</a></li>
                 <li><a href="about.htmal"class="selected">About</a></li>
                 <li><a href="contact">Contact</a></li>
             </ul>
         </nav>
        </header>
        <div id="wrapper"> 
            <section>
                <img src="img/chall-pic.png" alt="profile-pic" class="profile-photo">
                <h3>About</h3>
                <p> Hi, I'm Alicia Hall and you are looking at my design portfolio. Building things and making them pretty is my passion. When I am not building things I am traveling and visiting new places or relaxing having a nice glass of wine (red being my favorite) or watching a movie.</p>
                <p>If you would like to follow me on Twitter, my user name is <a href="http://twitter.com/chall">@chall</a>.</p>
            </section>
            </div>
            <footer>
                <a href="http://twitter.com/challfuture"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
                <a href="http://facebook.com/carleenhall"><img src="img/facebook-wrap.png" alt="Face Book Logo" class="social-icon">

                <p>&copy; 2016 Carleen Hall.</p>
            </footer>

    </body>
</html> 
        </p>

body {
    font-family:'lato', sans-serif;
}
#wrapper {
    max-width: 940x;
    margin: 0 auto;
    padding: 0 5%;
    background-color: #A10708;  
}

/* links */

a {
    text-decoration: none;
}

.rose {

    max-width: 100%;
    margin: 0 auto 30px;
}

#wrapper p  {
    margin: 0;
    padding: 5%;
    font-size: small;
    color: #FCFBE7;

}

h3 {


}

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



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

h1 {
    font-family: 'Courgette', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal; 
    line-height: 0.8em;
}

h2 {
    font-family: 'Courgette', sans-serif;
    font-family: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}


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 li a {
    padding: 20px;
}



.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%;
}

footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px

}

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

/* site body */

body {
    background: #FCFBE7;
    color:#999;
}

header {
    background-color:#A10708;
    border:  #e60f2f; 

}

/* logo text */
h1, h2 {
    color: rgba(#fff);
}


/*nav background on mobile devices */
nav {
    background: #e60f2f; 
}

/*nav links */

nav a, nav a:visited {
    color: #fff;

}

/* slected nav link */

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

/* links */

a {
    color: #fff;
}


footer p {
    color: #999;
}</p>
leonvsthings
leonvsthings
12,236 Points

You can upload this code to a Workspace (in html & css files) and just share the address.

4 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

If you want that the h3 stays at the center, just applly:

h3 {
  text-align: center;
}

If you want that the h3 aligns to the left with the paragraph below, applly:

h3 {
  margin-left: 5%;
}