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 trialCarleen Hall
Front End Web Development Techdegree Student 3,158 PointsMy 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>© 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>
4 Answers
Kallil Belmonte
35,561 PointsIf 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%;
}
Carleen Hall
Front End Web Development Techdegree Student 3,158 PointsThanks margin-left: 5%; worked perfect.
Kallil Belmonte
35,561 PointsGlad it helped : )
leonvsthings
12,236 Pointsleonvsthings
12,236 PointsYou can upload this code to a Workspace (in html & css files) and just share the address.