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

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

h2 line problem

i got a problem with my h2 in the header. When i finish coding my responsive, my h2 headline is not align with my h1 headline can somebody help me please?

thank you

http://web-iyjyzgdwwc.treehouse-app.com/index.html

HTML <header> <a href="index.html" id="logo"> <h1>Manou'Neww Multi Design</h1> <h2>Multimedia/Web Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Porfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header>

CSS (main)

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

}

logo{

text-align:center; margin: 0; }

h1 { text-align:center; font-family: 'Raleway', sans-serif; margin:15px 0; font-size:1.75em; font-weight:normal; line-height: 1em; }

h2{ font-size:0.75em; margin: -5px 0 0; font-weight:normal; }

CSS (Responsive)

@media screen and (min-width: 660px) {

/--------------------------------- HEADER -----------------------------------/

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; }

}

Adam Moore
Adam Moore
21,956 Points

You'll need to be a bit more specific about what the issue is, possibly including your code on here, using the Markdown Cheatsheet below as a guide on how to post code to the forum here.

7 Answers

Dov Breuer
Dov Breuer
8,268 Points

Share your code this way:

            <p>This is code!</p>```

How?? because it's my first time here

Adam Moore
Adam Moore
21,956 Points

With some back ticks, which are little marks that look like apostrophes, but the key is different. For me, it's on the key with the "~" just above my "tab" key and left of my "1" key on the top left of my key board. You put hit "return" to return down one or two returns from the regular text, type three of the back ticks, return again, paste or type your code, return again, and put three closing back ticks, returning a time or two after the closing back ticks if you want to type more text.

~<p>This is code</p>

Adam Moore
Adam Moore
21,956 Points

No, it's not the ~ symbol, it's the other symbol on that key with the ~.

<code><p>This is code</p></code>

<p>this is code</p>``

Adam Moore
Adam Moore
21,956 Points

What this did was close. If you only add 1 back tick to either side of the code, it puts the code in with these special font settings that make it stand out, and you can use it for writing inline code bits. However, to make a block of code, with the black background here like Dov did, you need 3 backticks, followed by a return, then code, then return, then 3 back ticks. Your 3 back ticks have to be on lines by themselves to block the code off.

Thanks but i think i know my problem maybe it's the H1

Adam Moore
Adam Moore
21,956 Points

Ok, well, if you have the issue figured out, then great! :)

thank for helping me