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

Mike Me
Mike Me
5,148 Points
Posted by Mike Me
Mike Me
5,148 Points

Have a problem with my portfolio WebSite

The issue is that my navigation lists doesn't seems to be centred. When I gave to my .main-nav and .main-nav li items a background it appears that navigation lists are causing a problem. Please help to solve it.

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header class="main-header">
      <h1 class="name"><a href="#">Mike Me</a></h1>
      <ul class="main-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Front End Development</a></li>
        <li><a href="#">iOS Development</a></li>
        <li><a href="#">Android Development</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
    <div class="banner">
      <h1>Let's code!</h1>
      <span>Ukraine is the first place where I'd like to work</span>
    </div>
    <div class="wrapper">
      <div class="main-content">
        <h2>Who am I?</h2>
        <p>I am the one who without fear(or through fear) dicaded to swicth my bouring carer to new one. I'm interested in Web Development and Mobile App Development(currently my focus is on iOS).</p>
      </div>

      <div class="second-content">
        <h2>Languages</h2>
        <p>Besides programming languages, I also can speak several human languages such as Russian, English, Turkish and Deutsch</p>
      </div>
    </div>
    <footer>
      <p>&copy;2016 Mike Me</p>
    </footer>
  </body>
</html>

/* Base Style:
==========================*/


/* test code*/


.name {
  background-color: grey;
}

.main-nav {
  background-color: orange;

}

.main-nav li {
   background-color: yellow;

}

h1 {
  color: #093a58;
}
.name a {
  text-align: center;
  display: block;
  color:#093a58;

}

a {
  text-decoration: none;

}

.main-header {
  text-align: center;
}

.main-nav li {
  list-style: none;
  display: block;


}

.wrapper {
  margin-left: 1em;
  margin-right: 1em;
}

/* Navigation*/

.main-nav a:hover {
  color: #093a58;

}

.main-nav a {
  display: block;
  color: #3acec2;
  text-align: center;
}

.main-nav li {
  margin-bottom: 10px;
}


/* Sticky footer*/

/*
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrapper {
  flex: 1;
}
*/

footer {
  background: grey;
  padding: 10px 0 ;

}



/* Layouts */

.main-header {
  background-color: #fff;
}

.banner {
  background: #3acec2;
}

3 Answers

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Mike,

I'm not using an IDE but a text editor. The text editor I'm using is Atom, it's open source and free and I really like it! But there are many other great text editors like Brackets by Adobe which is also open source and free and Sublime Text which is priced at $70 but has a free unlimited trial.

All three of them are highly customizable through packages and themes and almost feel like IDEs to me even though they are not. I recommend you check them out and look if they fit your needs.

If not and you really want to have an IDE I recommend you take a look at one of JetBrains' products like WebStorm. JetBrains' IDEs have a free trial period of 30 days but after that you'll have to pay a yearly subscription price.

I hope I could help you!

Mike Me
Mike Me
5,148 Points
Mike Me
Mike Me
5,148 Points

Thanks a lot Tobias! Can you please explain why I had this issue? in order to avoid it in the future. Thanks again anyway!

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

No problem, I'm glad I could help you! As far as I know this problem occurred because of the default styling of lists. The list is indented with a padding by default so that it (or let's say the list items in it) doesn't collide with the bullet points that are there. In your case you decided to remove the bullet points with "list-style: none" but the padding remains.

I hope I could make it a bit more clear!

Tobias Helmrich
Tobias Helmrich
31,602 Points
Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey there Mike,

I hope that I understood your problem correctly. I fixed it by just setting the padding of the unordered list with the .main-nav class to zero as it removes the indentation of the list items.

Oh, and just a hint by the way: You should give the list-type property to the list and not the list item.

.main-nav { 
    background-color: orange;
    padding: 0;
    list-style: none;
}