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 rossace23
rossace23
3,819 Points

CSS - text-align: center; not exactly centered

I am working on the nav section of my page, and am trying to center it exactly in the middle of the page. I have just started coding the nav section, and am using the "text-align: center;" method for centering the nav in the middle of the page under my image. However, when using this, the centering seems a little off, a bit towards the right of the page. Pretty sure this isn't an optical illusion, so can anyone have a look at my code below and see what I am missing? I am using firefox as a browser.

I can paste my html code as well if need be, but it is pretty basic at this stage, nothing crazy different from the intro to html Treehouse workspace.

/********************************************
GENERAL
*********************************************/

header {
    background-color: #000;
    max-width: 25%;
}

a {
    text-decoration: none;
    border-style: none;
    outline: none;
}

a:link {
    color: white;
}

a:visited {
    color: #FFFFE9;
}


/********************************************
HEADING
*********************************************/
/* For Padding: 0 = top, 0 = right, 30px = bottom, 0 = left (just like a clockwise motion) */

.BandName {
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 20px 20px 20px;
}



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

.middlepage {
    background-color: #000;
}

.MouthsLogo {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 200px;
     margin-top: 0;
     height: auto; 
    width: auto;
     max-width: 150px; 
     max-height: 150px;
     padding: 20px 20px 20px 20px;  
}



/********************************************
NAV
*********************************************/

nav {
    text-align: center;
}



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

footer {
    background-color: #FFF;
}

2 Answers

samiff
samiff
31,206 Points

Sounds like the default padding or spacing on a ul element, try:

nav ul {
  padding: 0;
}

Or whatever might be relevant to your code. This is one of those cases where using the Chrome Dev Tools can really help visualize what's going on. Hard to say exactly what without having a snapshot of your code.

jide delano
seal-mask
.a{fill-rule:evenodd;}techdegree
jide delano
Python Development Techdegree Student 14,220 Points
jide delano
.a{fill-rule:evenodd;}techdegree
jide delano
Python Development Techdegree Student 14,220 Points

Better late than never :)

Try using: nav { text-align: center; overflow: hidden; }