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 Build Navigation with Unordered Lists

Fedor Andreev
Fedor Andreev
6,438 Points
Posted by Fedor Andreev
Fedor Andreev
6,438 Points

I can't correct the 2 mistakes, help?

Mistake #1: Make the headline "Fedor Andreev" be in the exact center. (I fixed this problem before but then it came back out of nowhere! Tried to fix it again and this time it couldn't be fixed!"

Remove the bold dots from contact list; phone number, email.. e.t.c. (I used list-style: none;````) Please help me! Here are my codes:

INDEX

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
    <header>
      <a href="index.html" id="logo">
        <h1>Fedor</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>

              <img src="img/tree.png" alt="">
              <p>The Great Tree.</p>

          </li>
          <li>

              <img src="img/splash.jpg" alt="">
              <p>WormHole.</p>

          </li>
          <li>

              <img src="img/paint.jpg" alt="">
              <p>Paint.</p>

          </li>
          <li>

              <img src="img/color.jpg" alt="">
              <p>Digital Colors.</p>

          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon" ></a>
        <p>&copy; 2014 Fedor Andreev.</p>
      </footer>
    </div>
  </body>

</html>

    ``` 



  ``` CONTACT  ``` 

 ```html
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
<link rel="stylesheet" href="css/stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
    <header>
      <a href="index.html" id="logo">
        <h1>Fedor</h1>
        <h2>Andreev</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General Information</h3>
        <p>The contact page is similar to the about page we added previously. Special contact links will allow site visitors to email us directly or call us on a mobile phone browser.</p>
        <p> Please only use phone contact for urgent inquries. Otherwise social websites are the
          best way to reach me</p>
      </section>
      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info"></ul>
        <li class="phone"><a href="Tel:555-342-3425">555-342-3425</a></li>
        <li class="mail"><a href="mailto:Fedor@example.com">Fedor@example.com</a></li>
        <li class="twitter"><a href="http://twitter.com">@Fedor</a></li>
      </section>
      <footer>
        <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Fedor Andreev.</p>
      </footer>
    </div>
  </body>

</html>

CSS CODE 

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

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

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

a {
  text-decoration: none;
}

img {
  max-width: 100%;

}

h3




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

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

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

h1 {
  font-family: 'Changa One', sans-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;
}

h3 {
  margin: 0 0 1em 0;
}


/**********************************
NAVIGATION
***********************************/

nav {

  text-align: center;
  padding: 20px 0;
  margin: 20px 0;

}

nav ul {
  list-style: none;
  margin: 0 20px;
  padding: 0;
}

nav li {
  display: inline-block;

}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}
/**********************************
List
***********************************/

ul {
  list-style: none;
}



/**********************************
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;
}



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

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

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

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

/**********************************
PROFILE
***********************************/

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


/**********************************
PAGE CONTACT
***********************************/

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

/**********************************
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 text */
h1, h2 {
  color: #fff;
}

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

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

    ```

3 Answers

daniel csillag
daniel csillag
2,840 Points
daniel csillag
daniel csillag
2,840 Points

Your header is text-align: center; yes? You could try margin: auto; on the headline

EF Tobias
EF Tobias
4,441 Points
EF Tobias
EF Tobias
4,441 Points

Try:

ul { list-style-type: none; }

Also as far as the header, try moving the #logo element up above the header element.