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!

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

Uneven header and the ID isn't working

Edit: Solved!

So I'm having trouble with two things. I've been trying to create a nice header which has an even amount of space on the top and bottom of the text. However I can't seem to figure out the best way to achieve this. Lets say that my font-size was 30px and I wanted a padding of 20px on the top and bottom wouldn't that mean that I would need to have a height of 70px to make it even. So 30px +20 +20= 70? If so then why does the index page show the heading with more space beneath the header? Is my maths really off or is there something else wrong here? Also I'm having trouble working out how to use the ids correctly as the changes aren't showing up on my page. I'm trying to make a bold heading for my section. Here's my code:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset= "utf-8">
    <title>Text</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
    <a href= "index.html"> 
    <h1> Text </h1> 
    </a> 
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="linktwo.html">Linktwo</a></li>
            <li><a href="linkthree.html">Linkthree</a></li>
            <li><a href="linkfour.html">Linkfour</a></li> 
        </ul>
    </nav>
</header>
<div>
<section>
    <p id "main-heading">Text</p>
    <p> Text </p>
    <p> Text </p> 
</section>  
<footer>
    <p> &copy; 2015 Text </p>
</footer>
</div> 
</body>
</html>

CSS:

/******************************
HEADER
******************************/

h1 { 
background: #000000;  
color: #FFFFFF;  
height: 70px;  
text-align: center;
padding: 20px 0 20px 0; 
font-family: "Allura-Regular" ,serif;
font-size: 30px;  
}

header {  
background: #8F006B;  
}

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

nav { 
text-align: center;
padding: 10px 0; 
background: #E6E6E6;  
}

nav ul {
list-style: none;
margin: 0 15px;
padding: 0; 
font-family: "Cantarell-Regular" ,serif;    
}

nav li { 
display: inline-block;  
}

a:link {
text-decoration: none; 
}

nav li a {
color: #A6A6A6;
}

nav li a:hover {
color: #808080;
}

/******************************
SECTION
******************************/

section { 
background: #FFFFFF; 
color: #000000;
height: 410px; 
margin: 15px; 
border: 4px solid black;
border-radius: 20px;
}

p {
font-family: "Cantarell-Regular" ,serif;
margin: 15px;  
line-height: 1.3; 
} 

#main-heading {
font-weight: bold; 
}

/******************************
BODY
******************************/

body { 
background: #FFFFFF; 
}

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

footer { 
background: #000000; 
color: #FFFFFF;
margin: 15px; 
font-family: "Cantarell-Regular" ,serif;
}

3 Answers

Your ID isn't working because you forgot to put the =

<p id="main-heading">Text</p>

and in the css you need to call the ID using the pound symbol #main-heading

#main-heading {

font-weight: bold;

}

OK that's working now, thanks.

Any idea about the header?

Sorry, I'm trying to understand what you want to achieve with the heading.

Basically, I'm trying to get the text to sit perfectly in the middle with an even padding on the top and bottom. Even though I've set it to 20px on the top and bottom there seems to be twice that amount on the bottom when I view it in safari. I'm wondering where that's coming from so that I can fix it.

Nevermind, I removed the height and just left the padding. Now it's perfectly even.

I feel like a crazy person, lol.

Lol, hahaha I was breaking my head trying to figure this out too haha. Glad to know that you fixed it, sorry i couldn't help more, I'm really new to this kind of.