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

Posted by Joshua Jones
Joshua Jones
4,756 Points

Logo Centering Issue

I've been doing the "Build your website course" <h1> Has my name in it as the Logo, but for some reason it's not 100% centered with the nav bar.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Joshua,

Could you please post your html and css so we can take a look and help you out.

Joshua Jones
Joshua Jones
4,756 Points

Hi, sorry. I'm not sure how to add images.

Joshua Jones
Joshua Jones
4,756 Points

[alt text](Users/Josh/Desktop/help2.png "Title") [alt text](Users/Josh/Desktop/help1.png "Title")

Joshua Jones
Joshua Jones
4,756 Points

Here is my code via Imgur

http://i.imgur.com/bWYuiHR.png

http://i.imgur.com/Bezkilj.png

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Joshua,

Here is how you add your code to a post.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

You have to make sure you have a bit of space under your last line of text in your post. Then you add three back ticks followed by html or css depending on the type of code your inserting.
Then straight after your last line of code you add another three back ticks.
Remember to leave at least a few lines between any text at the top or bottom of your code.

alt text

Hope this helps.

Joshua Jones
Joshua Jones
4,756 Points

I apologize in advance!

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

/*red background*/
header {
  background: #782727;
  border-color: #d3d3d3;
}

#logo {
  text-align: center;
  margin: 0 auto;
  }

h1, h2 {
  color: #fff;
}

h1 {
  font-family: 'Arvo', serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

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

 <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Joshua Jones</h1>
        <h2>Development</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">Contact</a></li>
        </ul>
      </nav>
    </header>
Joshua Jones
Joshua Jones
4,756 Points

Thank you Wayne! it's still not centered right. I've posted the code here. I want it to be centered with the 'about'. Thank you so much for your input!

3 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Joshua,

You have a couple of typo's.

nav il {   /* should be li not il */
  list-style: none;
  margin: 0 10px;
  padding 0; /* missing colon  but if you want padding 0 you should just leave out the padding altogether */
}

Hope this helps.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Joshua,

Couple of little mistakes.

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 30x 0 0 0;  /* you have 30x instead of 30px */
  padding: 5 0 0 0; /* you have 5 instead of 5px */
  width: 100%;
}

After that everything looks good, take a look at you site here on codepen everything looks centred.

Hope this helps.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Joshua,

If you make these changes your nav will centre.

nav il {
  list-style: none;
}

nav a {
  font-weight: 800;
  margin-right: 50px;
  padding: 15px 10px;   
}

Hope this helps.

Joshua Jones
Joshua Jones
4,756 Points

Hi Wayne, I'm still having a centering issue. I'm sorry to keep posting. This is the changes i have made to my nav but It's still not fully centering. 

nav {
  font-family: 'Droid Serif', serif;
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
 }

nav il {
  list-style: none;
  margin: 0 10px;
  padding 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  margin-right: 50px;
  padding: 15px 10px
}
```css