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 Sam Page
Sam Page
1,170 Points

Centering Issues

Hello I am currently building a site and have added some cool css from Css-tricks.com. My problem is that the css (makes the nav look like leaves and spin when you hover on them) isn't centering alone with the site logo. Can anyone help?

http://codepen.io/anon/pen/glyEb

9 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Try

header {
    margin: 0 auto;
    width: 100%;
}
Sam Page
Sam Page
1,170 Points
Sam Page
Sam Page
1,170 Points

That moved it all the way to the right ;/

Emeka Okoye
Emeka Okoye
2,489 Points
Emeka Okoye
Emeka Okoye
2,489 Points

Take out these two declarations from your header rule

header {
    float: left;
    width: 75%;
}

Add this declaration to your nav rule

nav{
    margin: 0 auto;
}

Take out what you had in nav before that.

Sam Page
Sam Page
1,170 Points
Sam Page
Sam Page
1,170 Points

That just moved it to the right also...

Emeka Okoye
Emeka Okoye
2,489 Points

It solved the problem on codepen. What browser are you using?

Sam Page
Sam Page
1,170 Points

Safari

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points 
<body>
<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>

    <div id="page-wrap">
        <header>
            <nav>
                <ul align="center" class="top-menu">
                    <li><a href="index.html">Home</a><div class="menu-item" id="home"></div></li>
                    <li><a href="about.html">About</a><div class="menu-item" id="about"></div></li>
                    <li><a href="contact.html">Contact</a><div class="menu-item" id="contact"></div></li>
                </ul>
            </nav>
        </header>

        <div align="center" id="wrapper">
            <section>
                    <div id="logoimg">
                        <img src="img/logo.png" alt="" align="center">
</div>

                    <div id="homecontent">
                <p>Here at Omni5 we are in all the way to revolutionize the way people use their phones and computers.  At Omni5 we combine creativity, inspiration and intelligence to create amazing apps and websites.  So join Omni5 and go all the way!</p>
</div>
            </section>
            <div align="center">
                <footer>
                    <a href="http://twitter.com/Omni5">
                        <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
                    </a>

                    <a href="http://facebook.com/Omni5">
                        <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
                    </a>
                </footer>   
            </div>
        </div>
        </div>
</body>

/***************************
General
***************************/

body {
    font-family: 'Roboto', sans-serif;
}



a {
    text-decoration: none;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

h3 {
    margin: 0 0 1em 0;
}



/***************************
Heading
***************************/



header {
    margin: 0 auto;
    width: 100%;
}

#logoimg {
    text-align: center;
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%;
    clear: both;
}
#logoimg {
    text-align: center
}

#homecontent {
    text-align:center;
}

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

header {
    background-color: #ffffff;
    border-color: #ffffff;
}
h1, h2 {
    color: #fff;
}

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

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


/***************************
Navigation
***************************/


nav {
    text-align: center;
}

.top-menu{
padding:0;
}
.top-menu li {
    display: inline-block;
    text-align: center;
    margin: 30px 5px;
    position: relative;
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.top-menu li:hover {
    margin: 30px 20px; 
}
.top-menu li:active {
    margin: 30px 33px; 
}
.top-menu li a  {
    width: 100px;
    height: 100px;
    z-index: 9999;
    position: absolute;
    top: 35px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
    -webkit-transition: all 0.1s linear; 
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
}
.top-menu li:active a {
    font-size: 26px;
    top: 30px;
    text-shadow: none;
}
.top-menu li div.menu-item {    
    width: 100px;
    height: 100px;
    display: block;
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-border-top-left-radius: 100px; 
    -webkit-border-bottom-right-radius: 100px; 
    -moz-border-radius-topleft: 100px; 
    -moz-border-radius-bottomright: 100px; 
    border-top-left-radius: 100px; 
    border-bottom-right-radius: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{ 
    -webkit-border-top-left-radius: 80px; 
    -webkit-border-bottom-right-radius: 80px; 
    -moz-border-radius-topleft: 80px; 
    -moz-border-radius-bottomright: 80px; 
    border-top-left-radius: 80px; 
    border-bottom-right-radius: 80px; 
        -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{ 
    -webkit-border-top-left-radius: 50px; 
    -webkit-border-bottom-right-radius: 50px; 
    -moz-border-radius-topleft: 50px; 
    -moz-border-radius-bottomright: 50px; 
    border-top-left-radius: 50px; 
    border-bottom-right-radius: 50px; 

}
#home { background: #0392C9; }
#about { background: #59585A; }
#contact { background: #FE5804; }





/***************************
Footer
***************************/



footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc;
}

.social-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
}

edit: closed some div tags

Sam Page
Sam Page
1,170 Points
Sam Page
Sam Page
1,170 Points

http://imgur.com/a/f3F3Q

Emeka Okoye
Emeka Okoye
2,489 Points

Thanks for the image, it centerd the text which is what means using your exact code and taking out the float and width declarations from the header rule should work.

http://codepen.io/anon/pen/bhglI

Sam Page
Sam Page
1,170 Points
Sam Page
Sam Page
1,170 Points

http://imgur.com/vA8X6dX

Emeka Okoye
Emeka Okoye
2,489 Points

Have you modified your CSS since you put the code up on codepen?

Paste your current html and css code on here. I will test in Safari.

Sam Page
Sam Page
1,170 Points
Sam Page
Sam Page
1,170 Points 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Omni5</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Droid+Serif|Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
    </head>
      <div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>
    <div id="page-wrap">
        <header>
            <nav>
                <ul align="center" class="top-menu">
                    <li><a href="index.html">Home</a><div class="menu-item" id="home"></div></li>
                    <li><a href="about.html">About</a><div class="menu-item" id="about"></div></li>
                    <li><a href="contact.html">Contact</a><div class="menu-item" id="contact"></div></li>
                </ul>
            </nav>
        </header>
        <body>
        <div align="center" id="wrapper">
            <section>
                    <div id="logoimg">
                        <img src="img/logo.png" alt="" align="center">
                    </div id="homecontent">
                <p>Here at Omni5 we are in all the way to revolutionize the way people use their phones and computers.  At Omni5 we combine creativity, inspiration and intelligence to create amazing apps and websites.  So join Omni5 and go all the way!</p>
            </section>
            <div align="center">
                <footer>
                    <a href="http://twitter.com/Omni5">
                        <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
                    </a>

                    <a href="http://facebook.com/Omni5">
                        <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
                    </a>
                </footer>   
            </div>
        </div>
        </div>
    </body>
</html>

Css

/***************************
General
***************************/

body {
    font-family: 'Roboto', sans-serif;
}



a {
    text-decoration: none;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

h3 {
    margin: 0 0 1em 0;
}



/***************************
Heading
***************************/



header {
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
}

#logoimg {
    text-align: center;
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%;
    clear: both;
}
#logoimg {
    text-align: center
}

#homecontent {
    text-align:center;
}

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

header {
    background-color: #ffffff;
    border-color: #ffffff;
}
h1, h2 {
    color: #fff;
}

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

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


/***************************
Navigation
***************************/


nav {
    text-align: center;
}
.top-menu li {
    display: inline-block;
    text-align: center;
    margin: 30px 5px;
    position: relative;
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.top-menu li:hover {
    margin: 30px 20px; 
}
.top-menu li:active {
    margin: 30px 33px; 
}
.top-menu li a  {
    width: 100px;
    height: 100px;
    z-index: 9999;
    position: absolute;
    top: 35px;
    font-weight: bold;
    display: block;
    text-decoration: none;
    font-size: 20px;
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
    -webkit-transition: all 0.1s linear; 
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
}
.top-menu li:active a {
    font-size: 26px;
    top: 30px;
    text-shadow: none;
}
.top-menu li div.menu-item {    
    width: 100px;
    height: 100px;
    display: block;
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-border-top-left-radius: 100px; 
    -webkit-border-bottom-right-radius: 100px; 
    -moz-border-radius-topleft: 100px; 
    -moz-border-radius-bottomright: 100px; 
    border-top-left-radius: 100px; 
    border-bottom-right-radius: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{ 
    -webkit-border-top-left-radius: 80px; 
    -webkit-border-bottom-right-radius: 80px; 
    -moz-border-radius-topleft: 80px; 
    -moz-border-radius-bottomright: 80px; 
    border-top-left-radius: 80px; 
    border-bottom-right-radius: 80px; 
        -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{ 
    -webkit-border-top-left-radius: 50px; 
    -webkit-border-bottom-right-radius: 50px; 
    -moz-border-radius-topleft: 50px; 
    -moz-border-radius-bottomright: 50px; 
    border-top-left-radius: 50px; 
    border-bottom-right-radius: 50px; 

}
#home { background: #0392C9; }
#about { background: #59585A; }
#contact { background: #FE5804; }





/***************************
Footer
***************************/



footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc;
}

.social-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
}





/***************************
About Page
***************************/



.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100px;
}



/***************************
Contact Page
***************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}



/***************************
Colors
***************************/


nav {
    background: #ffffff

}

nav a, nav a:visited {
    color: #ffffff;
}

nav a.visiting, nav a:hover {
    color: #ffffff;
}

body {
    background-color: #fff;
    color: #999;
/***************************
Other
***************************/

#page-wrap {
     width: 800px;
     margin: 0 auto;
}
body {
  text-align: center;
 }

#page-wrap {
  text-align: center;
  width: 800px;
  margin: 0 auto;
}
.loader {
    text-align: center;    
}
.loader span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader 0.9s infinite alternate;
    -moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@-moz-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}
Emeka Okoye
Emeka Okoye
2,489 Points

I've tested your code in Chrome and Safari (5.1, 6.0 and 7.1) and it appears to be fine and centred.

Have you tried opening the page in another browser? Does it behave in the same way?

Sam Page
Sam Page
1,170 Points
Sam Page
Sam Page
1,170 Points

Yes, in Chrome it is not centered either. Could it be my computer? I have the MacBook Air (13-inch, Early 2014), 1.7 GHz Intel Core i7, 8 GB 1600 MHz DDR3, Intel HD Graphics 5000 1536 MB, running OS X Yosemite version 10.10

Hugo Paz
Hugo Paz
15,622 Points

You have errors in your code. You have code outside the body. 

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>
    <div id="page-wrap">
        <header>
            <nav>
                <ul align="center" class="top-menu">
                    <li><a href="index.html">Home</a><div class="menu-item" id="home"></div></li>
                    <li><a href="about.html">About</a><div class="menu-item" id="about"></div></li>
                    <li><a href="contact.html">Contact</a><div class="menu-item" id="contact"></div></li>
                </ul>
            </nav>
        </header>

That might be the reason you are getting errors.

You also did not close divs properly. 

<section>
                    <div id="logoimg">
                        <img src="img/logo.png" alt="" align="center">
                    </div id="homecontent">
                <p>Here at Omni5 we are in all the way to revolutionize the way people use their phones and computers.  At Omni5 we combine creativity, inspiration and intelligence to create amazing apps and websites.  So join Omni5 and go all the way!</p>
            </section>

it should be:

<section>
                    <div id="logoimg">
                        <img src="img/logo.png" alt="" align="center">
</div>
                    <div id="homecontent">
                <p>Here at Omni5 we are in all the way to revolutionize the way people use their phones and computers.  At Omni5 we combine creativity, inspiration and intelligence to create amazing apps and websites.  So join Omni5 and go all the way!</p>
</div>
            </section>
Sam Page
Sam Page
1,170 Points

? There are divs at the bottom. The html is fine, it's the CSS. It's not centering on my computer.

Hugo Paz
Hugo Paz
15,622 Points

The HTML is not fine. You have code outside the body tag. You have divs that are not closed in the right places, You have a a closing div tag with an id. Bad HTML will render incorrectly on a browser. With the fixes i made a i get the nav bar centered above the logo.