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

HTML How to Make a Website Styling Web Pages and Navigation Review: Styling Web Pages and Navigation

Posted by John Doe
John Doe
4,003 Points

Gallery doesn't center correctly

Hi,

It seems that my gallery is slighty off-center, leaning to the right-side. To make it more clear, i put a border around the div. I guess there is some unseen padding or margin somewhere that i cannot identify.

Does anyone have an idea how to fix this ? 

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

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

a { 
 text-decoration: none; 
}

/* actual body */

#wrapper {
  max-width: 940px;
  border: 3px solid #73AD21;
  padding: 0 5%;
  margin: 0 auto; 
  /*background-color: lightblue;*/
}

img {
  max-width: 100%; 
}

/*********************
  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: 'Open Sans', 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;
}


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

nav {
  text-align: center; 
  padding: 10px 0;
  margin: 20px 0 0;
}

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

nav li {
  display: inline-block; 
}

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

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color:  #000;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
/*********************
  PAGE: PORTFOLIO
**********************/

#gallery {

  margin: 0;
  padding 0;
  list-style: none;
}

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

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


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

body {
  background-color: #ededed; 
}

/* yellow header */
header {
  background: yellow;
  border-color: black;
}

/* logo text in header */
h1, h2 { 
  color: #000; 
}

/* navigation background */
nav {
  background-color: #e4bfe0;   
}

/* link color */ 
a {
  color: #fff;
}

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

/* selected navigation links */ 
nav a.selected, nav a:hover {
  color: brown; 
}
```html

1 Answer

Jacob Mishkin
Jacob Mishkin
23,117 Points

one way to find out is by using the dev tools and removing divs and see if that changes anything. I would also look at floats as well that are not cleared.