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

Posted by Rachael Amarant
Rachael Amarant
1,958 Points

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

Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

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;

}
Rachael Amarant
Rachael Amarant
1,958 Points

OK that's working now, thanks.

Any idea about the header?

Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

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

Rachael Amarant
Rachael Amarant
1,958 Points

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.

Rachael Amarant
Rachael Amarant
1,958 Points

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

I feel like a crazy person, lol.

Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

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.