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

Kenny Parewijck
Kenny Parewijck
4,602 Points
Posted by Kenny Parewijck
Kenny Parewijck
4,602 Points

Problem with centering

Hello everybody

Something weird is going on here. I am following the course "how to make a website". I am styling my gallery now, so I added a float left and a width to the li's (45%) and a margin to the li's (2.5%).

But..

When I add my margin to my li's the gallery list items lean to the right. No more centering. When I remove my margin the items are centered right.

I checked trough the dev tools from chrome, I don't see anything wrong..

It would be nice If someone could help me.

Cheers!

my code: HTML

<!Doctype html> <html> <head> <meta charset="utf-8"> <title> Kenny Parewijck - Ondernemer </title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,800,700italic,400italic,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Kenny Parewijck</h1> <h2>Ondernemer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Project portfolio</a></li> <li><a href="about.html">Over mij</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" alt="About project one" /> <p>Beschrijvende tekst over Project één. Hier komt de algemene beschrijving van het project</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt="About project two" /> <p>Beschrijvende tekst over Project twee. Hier komt de algemene beschrijving van het project</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt="About project three" /> <p>Beschrijvende tekst over Project drie. Hier komt de algemene beschrijving van het project</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt="About project four" /> <p>Beschrijvende tekst over Project vier. Hier komt de algemene beschrijving van het project</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt="About project five" /> <p>Beschrijvende tekst over Project vier. Hier komt de algemene beschrijving van het project</p> </a> </li> </ul> </section> <footer> <a href="https://nl-be.facebook.com/kenny.parewijck"> <img src="img/facebook-wrap.png" alt="Facebook pagina Kenny Parewijck" /></a> <a href="https://twitter.com/?lang=nl"><img src="img/twitter-wrap.png" alt="Twitter pagina Kenny Parewijck" /></a> <p>© 2015 kenny Parewijck</p> </footer> </div> </body> </html>

And my code: CSS:

/*********** GENERAL STYLES ***********/

body { color: #999; background: #fff; font-family: 'Open sans',sans-serif; font-size: 0.8rem; }

a { text-decoration: none; }

li { list-style: none; }

header { background: #69b37a; }

nav { background: #589a68; font-family: 'Open sans', sans-serif; font-weight: 800; font-size: 1rem; text-align: center; }

nav ul { padding: 0; margin: 0; }

h1,h2 { color: white; }

h1 { font-weight: normal; font-family: 'Changa One',sans-serif; font-size: 2rem;

}

h2 { font-weight: normal; font-size: 0.8rem; }

img { max-width: 100%; }

footer { text-align: center; font-family: 'Open sans', sans-serif; font-weight: normal; color: #cdcccc; font-size: 0.8rem; }

/*********** ID STYLES ***********/

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

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

/*********** PSEUDO CLASS STYLES ***********/

nav a, nav a:visited { color: white; }

nav a:active { color: #306841; }

nav a:hover { color: #306841; }

nav a.selected { color: #306841; }

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

'#gallery li a p{ color: #bec4c8; margin:0; padding:10px; }

'#gallery li { background-color: #f5f5f4; margin: 0; padding: 0; float: left; width: 45%; margin: 2.5%; }

footer{ clear: both; }

PS: I added a ' before the # only here in this post. In my original code there is no '. If I don't place the ' before a # here in this post It won't show the #.

1 Answer

Krzysztof Kucharzyk
seal-mask
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points
Krzysztof Kucharzyk
.a{fill-rule:evenodd;}techdegree
Krzysztof Kucharzyk
Front End Web Development Techdegree Student 4,005 Points

Try to replace this part of your code:

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

#gallery li a p{ color: #bec4c8; margin:0; padding:10px; }

#gallery li { background-color: #f5f5f4; margin: 0; padding: 0; float: left; width: 45%; margin: 2.5%; }

On this one:

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

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

See if helped with this challenge

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi,

This works actually!

I just added this code to my general css ruls:

ul {margin: 0; padding:0;}

Thanks!