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
Tim Watkins
16,034 PointsCant get my h1 and h2 headline to line up evenly
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tim Watkins | Learning to code</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Cabin:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, intial-scale=1.0">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Tim Watkins</h1> <h2>Coding</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 id="gallery">
<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/timsepicfailure"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> </a>
<a href="http://facebook.com/tim.watkins.328"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a>
<p>© 2016 Tim Watkins.</p>
</footer> </div>
</body>
</html>
/* main.CSS*/
/************************************** GENERAL ****************************/
body { font-family: 'Cabin', 'sans-serif';
}
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 0;
}
/*************************************** 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: 'Montserrat', 'sans-serif'; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; padding: 0;
}
h2 { font-family: 'montserrat', 'sans-serif'; font-size: 1.75em; margin: -5px 0; font-weight: normal; padding: 0;
}
/*************************************** 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: 700; padding: 15px 10px; }
/*************************************** FOOTER ************************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: lawngreen; }
.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: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
/*************************************** PAGE ABOUT ************************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/*************************************** PAGE CONTACT ************************************/
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em;
}
.contact-info a { display:block min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }
.contact-info li.phone a { background-image: url('../img/phone.png'); }
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
/***************************************
COLORS
************************************/
/* green header*/ header { background-color: #6ab47b; border-color: #599a68; }
/* logo text*/ h1, h2 { color: #fff; }
/* links */
a {
color: #6ab47b;
}
/* nav background on mobile devices*/ nav { background: #599a68; } /* nav link*/ nav a , nav a:visited { color: #fff; } /* selected nav link*/ nav a.selected, nav a:hover { color: #32673f; } /* site body */ body { background-color: #fff; color: #999; }
/Responsive.css/
@media screen and (min-width: 480px) {
/*************************************** TWO COLUMN LAYOUT ***************************************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/*************************************** PAGE: PORTFOLIO ***************************************/
gallery li {
width: 28.3333%; }
gallery li:nth-child(4n) {
clear: left }
/*************************************** PAGE: ABOUT ***************************************/
.profile-photo { float: left; margin: 0 5% 80px 0;
} }
/*************************************** PAGE: HEADER ***************************************/
@media screen and (min-width: 660px){
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%;
}
logo {
float: left; margin-left: 5%; text-align: left; width: 45%;
}
h1 { font-size: 2.5em;
}
h2 { font-size: 0.825em; margin-bottom: 20px;
} header { border-bottom: 5px solid #599a68 margin-bottom: 60px; } }
4 Answers
Shane Oliver
19,977 PointsYou have -5px margin left and right on your h2. remove this to make it line up to your h1 as that has no margin set.
Tim Watkins
16,034 Pointsyeah there lower case just caps the css so can see where it start in the comment. so easier to see as I copy and paste all of the text.
Jennifer Nordell
Treehouse TeacherOk I'm a little curious as to why you have logo defined twice. You have it in main.css and again in responsive.css. It will be the responsive.css logo definition that's applied. Here's a couple of other things I notice. In the definition of the header style just below the h2 it seems like you have an extra closing curly brace. See what happens when you take that off.
Also, in your nav ul style you're missing a semicolon:
nav ul { list-style: none; margin: 0 10px; padding:0 } /* Missing semicolon after padding */
Tim Watkins
16,034 PointsThanks for finding some of the errors. but still h1 and h2 headlines still not aligning together.
Tim Watkins
16,034 PointsI try it and still not lining up
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherYou've listed the name of the main css file here as main.CSS. And you've listed the responsive.css file here as Responsive.css. Your html links to "main.css" and "responsive.css". My first suggestion to you is to make sure in your directory structure that the file names are actually main.css and responsive.css . Remember that file/path names are not generally case-sensitive on Windows systems. However, they are case sensitive on just about any web server, because those tend to be Linux based.