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 Ogechi Ike
Ogechi Ike
6,539 Points

Links won't work when I use text-align: center.

I a trying to redo my portfolio site for an upcoming job fair. When I use text-align: center, the links stop working.

Could someone please take a look at my code? Thank you for your time.

p.s. I also used the normalize.css file.

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900,300);


/******************
    GENERAL
*******************/
*{
    margin:0;
}
body{
font-family: 'Lato', sans-serif;
background: rgb(255, 243,242);
}

.wrapper{
    max-width: 900px;
    margin: 0 auto;
    padding:0 5%;
    padding-bottom: 70px;
    position: relative;


}
a{
    text-decoration: none;
}
header{
    background:rgb(130,37,36);
    float: left;
    width: 100%;
    margin: 0 0 40px 0;
    padding: 5px 0 0 0;
    width: 100%;
    top: -30%;
    left: 0;
    z-index: -1;
}
img{
    max-width: 100%;
}
li{
    list-style: none;
}


/******************
    HEADER
*******************/
.logo{
    display: block;
    text-align: center;
    padding: 0 0 0 20px;
}

nav{
    text-align: center;
    padding: 10px;
    margin: 20px 0 0;
    height: 40px;
    background: #3D0400;
}

nav ul{
    list-style: none;
    margin: -5px 10px;
    padding: 0px 0;
}
nav li{

    display: inline-block;
    font-size: 1.145em;
    font-weight: 700;
    padding: 0 15px;
}

nav li a:link{
    margin: 0;
    padding-right: 1em;
}

nav a{
    padding: 15px 10px;
    color: #fff;
}

nav li ul{
    visibility: hidden;
    position: absolute;
    padding: 0;
    margin: 0;
    background: #3D0400;
    margin-top: -1%;
}

nav li ul li{
    display: inline;
    float: none;
}


/******************
    MAIN BODY
*******************/

h1{
    font-size: 3.8em;
    text-align: center;
    font-weight: 900;
    margin: 0;
    padding: 10px;
}
h3{
    font-size: 1.5em;
}


/******************
    GALLERY
*******************/
.gallery{
    margin: 0 auto;
    list-style: none;

}
.gallery li{
    float: left;
    width: 40%;
    margin: 5%;
    background-color: #f5f5f5;
    color: #9c2509
}

/******************
    FOOTER
*******************/
.footer, .push{
    height: 70px;
}
footer{
    background: rgb(133,0,26);
    padding: 6px;
    bottom: 0px;
    left: 0;
    width: 100%;
    position: absolute;
    margin:0;
}
.footer p{
    color: #fff;
    text-align: center;
}
.footer a{
    color: #fff;
    font-size: 1.10em;
}

#foot{
    bottom: 0;
    left: 0;
    position: absolute;
}

/******************
    LANDING PAGE
*******************/

.welcome{
    font-size: 4em;
    text-align: center;
    line-height: 95px;
    margin: 0;
}

Also, here is the HTML file of the Landing Page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ogechi Ike | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head> 
<body>

    <header>
        <a class="logo">
                <img src="images/portfolio_logo.png" alt="Website Logo">
            </a>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
               <li><a href="work.html">My Work</a></li>
               <li><a href="about.html">About Me</a></li>
            </ul>
        </nav>  
    </header>
    <section class="wrapper">
        <h1 class="welcome">Welcome to my site! Feel free to look around!</h1>  
    </section>      

</body> 
</html>

1 Answer

Tim Knight
Tim Knight
28,888 Points

Hi Ogechi,

What's happening here is that your .wrapper is actually siting above your navigation and covering up the links so you can't click on them. It's being caused by the positioning of your wrapper and header. From what I can tell in your header {} code, your best option is just to remove the float: left; on there. You're not using it since the item is 100% width. That should solve the problem for you.

You don't need the positioning code on the header either because of the width, so your header could look something like this:

header{
  background: rgb(130,37,36);
  margin: 0 0 40px 0;
  padding: 5px 0 0 0;
  width: 100%;
}