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 trialJoshua Jones
4,756 PointsLogo 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.
Joshua Jones
4,756 PointsHi, sorry. I'm not sure how to add images.
Joshua Jones
4,756 Points[alt text](Users/Josh/Desktop/help2.png "Title") [alt text](Users/Josh/Desktop/help1.png "Title")
Joshua Jones
4,756 PointsWayne Priestley
19,579 PointsHi 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.
Hope this helps.
Joshua Jones
4,756 PointsI 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
4,756 PointsThank 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
19,579 PointsHi 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
19,579 PointsHey 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
19,579 PointsHi 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
4,756 PointsHi 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
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHey Joshua,
Could you please post your html and css so we can take a look and help you out.