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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Alain Breton
Alain Breton
2,656 Points

text aligned on the left

My

Portfolio About Contact

are still on on the left, not centered like my name and title... how can I fix this?

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

Hi Alain,

Please post your code so we can help.

3 Answers

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

Hi Alain,

Just add this code in your css

nav{
  text-align: center
}

nav ul{
  padding: 0;
}

This will align the ul to the center while removing the padding-left that ul have by default

Alain Breton
Alain Breton
2,656 Points
Alain Breton
Alain Breton
2,656 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Alain Breton | Random Thoughts </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
    <body>
      <header>
        <a href="index.html" id="logo">
        <h1>Alain Breton</h1>
        <h2>Designer</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.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div id="wrapper">
          <section>
            <ul id = "gallery">
              <li>
                <a href="img/numbers-01.jpg">
                  <img src="img/numbers-01.jpg" atl="">
                  <p>Experimentation with colour and texture.</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-02.jpg">
                  <img src="img/numbers-02.jpg" alt="">
                  <p>Playing with blending modes in Photoshop.</p>
                </a>
              </li>            
              <li>
                <a href="img/numbers-06.jpg">
                  <img src="img/numbers-06.jpg" alt="">
                  <p>Creating an 80's style of glows.</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-09.jpg">
                  <img src="img/numbers-09.jpg" alt="">
                  <p>Drips creating using Photoshop brushes.</p>
                </a>
              </li>            
              <li>
                <a href="img/numbers-12.jpg">
                  <img src="img/numbers-12.jpg" alt>
                  <p>Creating shapes using repetition.</p>
                </a>
              </li>            
            </ul>
          </section>
        <footer>
          <a href= "https://twitter.com/kreativpolyglot"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
          <a href= "http://www.facebook.com/BretonJpn"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
          <p>&copy; 2014 A. Breton.</p>
        </footer>
      </div>
    </body>
</html>

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

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

a
{
  text-decoration: none;
}

img
{
  max-width: 100%;
}

/***********************************
HEADING
***********************************/

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

h1
{
  font-family:'Changa one', sans-serif;
  margin:15px 0;
  font-size: 1.75em;
}

/***********************************
PAGE : PORTFOLIO
***********************************/

#gallery{
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li{
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}

/***********************************
COLORS
***********************************/

/* SITE BODY */
body {
  background-color: #fff;
  color: #999;
}

/* GREEN HEADER */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* NAV BACKGROUND ON MOBILE */
nav{
  background: #599a68;
}

/* LOGO TEXTS */
h1, h2 {
  color: #fff;
}

/* LINKS /*
a {
  color: #6ab47b;
}

/* NAV LINKS */
nav a, nav a:visited {
  color: #fff;
}

/* SELECTED NAV LINKS */
nav a.selected, nav a:hover  {
  color: #32673f;
}
Alain Breton
Alain Breton
2,656 Points
Alain Breton
Alain Breton
2,656 Points

thanks. ;-)