Centering visual elements on the page

Question

I was following Nick Pettit's basic portifolio page which uses an un-ordered list to display images.

It's a nice symmetric layout, and I wanted to give it a try without following the video

His looks like this http://uploadpie.com/7BJuH

As for mine, I'm not able to center the elements (the rectangles), they are moving to far to the left. http://uploadpie.com/3kEKH

What is the essential difference? Why are his <li> elements centered and mine are drifting to the left?

Here is the html and css for both

HIS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pet | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <header>

      <a  href="index.html" id="logo">
        <h1>Pet</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">
                <!--images are 1024 pixels by 768 pixels -->
                <li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg"> 
                <p>Expirementation with color and texture</p></a>
                </li>

                <li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg">
                <p>Playing with blending modes in photoshop</p></a>
                </li>

                <li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg">
                <p>Trying to creat an 80's style of glows</p></a>
                </li>

                <li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg">
                <p>Drips created using photoshop brushes</p></a>
                </li>

                <li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg">
                <p>creating shapes using repetition</p></a>
                </li>

            </ul>
        </section>

    <footer>
        <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2014 N.</p>
    </footer>
                </div>
  </body>
</html>

/**************************
*********QUESTIONS*********
**************************/
/*is there a differnce between 'Background' and 'background-color' property?
Answered Background is the short hand , and can add other -properties of listed values/keywords*/ 

a {
    color: #6ab47b;
    text-decoration: none;
}


img {
    max-width: 100%;
}


 #wrapper {

    max-width: 940px;   /*What's the significance of 940px? */
    margin: 0 auto;
    padding: 0 5%;

} 

body {
    font-family: 'Fjalla One', sans-serif;
}




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

}



/**************************
*********LOGO TEXT*********
**************************/

#logo {

    text-align: center;
    margin: 0;

}



header {
    background: #6ab47b;
    border-color: #599a68;
}   

h1, h2 {
    color: #fff;
}

h1 {
    font-family: 'Chewy', cursive;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-family: 'Bangers', cursive;
    font-size: 0.75em;
    margin: -5 0 0;
    font-weight: normal;
}

p {

    font-family: 'Orbitron', sans-serif;
}

/**************************
*********navigation*********
**************************/

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



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

nav a, nav a:visited {
    color: #fff;
}

nav ul {

    list-style: none;
    margin: 0 10px;
    padding: 0;


}

nav ul li {
    font-size: 1.2em;
    margin: 12px;
    display: inline-block;

}


/* Here the extra space will allow the user to touch the screen in a wider area, ie,   he made the area wider */
nav a {
    font-weight: 800;
    padding: 15px 10px;
}


/**************************
*********navigation*********
**************************/

footer {

    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color: #ccc;
}



/**************************
******************
**************************/
nav a.selected, nav a:hover {

    color: #32673f;

}



/**************************
***portfolio Gallery UL***
**************************/







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

/**************************
Style the Portfolio video

MAGIC IS RIGHT HERE
THE WIDTH OF EACH LIST ITEM AND HENCE THE IMAGE IS 45% OF THE SPACE
AND THE 2.5% MARGIN *TIMES* FOUR SIDES IS 100%!!
100% BACK IN CONTROL
**************************/



#gallery li {
    float: left;

    width: 45%;  
    /*each image,, actually, each list tag!!!! will only take total of 45% width of the parent element */

    margin: 2.5%;

    background-color: #f5f5f5;

    color: #bdc3c7;

}






/**********************
FOOTER SOCIAL ICONs
**********************/

.social-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;

}










/**************************
*********SITEBODY*********
**************************/

body {

    background-color: #fff;
    color: #999;

}

Mine

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>

<link rel="stylesheet" href="styles.css">
</head>

<body>
<header class="headercontainer">
<p>30 years experience in Metro-Detroit law</p>
<h1>M</h1>

</header>

<!-- bRAG POINTS
<div class="bragbanner">
<img src="lawyers_logo.png">
<img src="avvo_logo.png">
<img src="legalnews_logo.png">
<img src="aba.jpg">
<img src="free-press.jpg"> -->
</div>

<div class="mainarea">




        <ul>
        <li><h3>Family Law</h3></li>
        <li><h3>Domestic Law</h3></li>




        <li><h3>Matrimonial Law</h3></li>
        <li><h3>Probate Law</h3></li>
        </ul>





</div>


<footer></footer>
</body>




</html>

/* * {

    border: 1px solid blue;
}
 */


.headercontainer {

    border: 1px solid blue;
    text-align: center;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;


}


.bragbanner {

    text-align: center;
}


div img {
    max-width: 144px;
    max-height: 35px;

    -webkit-filter: grayscale(1);
    filter: grayscale(1);



}


.mainarea {

    /* text-align: center;

    width: 65%;

    border: 1px dotted orange;
    margin-left: auto;
    margin-right: auto;

    overflow: hidden;

    padding-left: auto;
    padding-right: auto; */


    max-width: 940px;   /*What's the significance of 940px? */
    margin: 0 auto;
    padding: 0 5%;



}

ul {


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

ul li {

    border: 1px solid black;
    width: 300px;
    height: 300px;
    float: left;
    margin: 2.5%;
    max-width: 45%;
    float: left;


}

Answer 1 · 2015-11-14T13:51:56Z

November 14, 2015 1:51pm

Do you have an example of the online page? It's hard to see what you did wrong with just code:)

Answer 2 · 2015-11-14T16:27:54Z

November 14, 2015 4:27pm

Could it be that you have text-align: center commented out for .mainarea in your own CSS?

Answer 3 · 2015-11-15T17:04:55Z

November 15, 2015 5:04pm

Thanks Stanley, Here it is on jsfiddle

http://jsfiddle.net/Aarondv1/vmmsfhax/

Shane, text-align was what I thought would fix it too, but also not making a differnece thanks

Answer 4 · 2015-11-15T17:09:02Z

November 15, 2015 5:09pm

Hi Aaron,

Your list items inside your maincontent are set to a width of 300px and the max width is set to 45%; So the 2 list items will never reach the width of 45% when having a full page because together they will have a width of 600 px.

What you can do instead is give the width of the li elements 45% instead of the max-width. This will make the list items 45% on full width page so it will center everything in the right way.:)

Answer 5 · 2015-11-15T17:40:18Z

November 15, 2015 5:40pm

Thanks, makes sense to me.

But now, its still not centered and the rectangles are not wrapping. Am trying to let them sit in a set of two, symmetrically and side-by-side like this: http://uploadpie.com/7BJuH

the width of the <li> items are each 45% with a 2.5% margin on each side, That is two list items 45% * 2 = 90%, and 2.5% margin * 4% sides = 100%,

shouldn't they float next to each other, filling exactly 100% of the their containing element ....

Here is the update, with the width changed to 45% http://jsfiddle.net/Aarondv1/vmmsfhax/2/

Answer 6 · 2015-11-15T17:43:19Z

November 15, 2015 5:43pm

JUST FIXED IT

USED THIS PROPERTY, box-sizing: border-box;

Welcome to the Treehouse Community

Looking to learn something new?

Aaron Selonke

Aaron Selonke

Centering visual elements on the page

6 Answers

Stanley Thijssen

Stanley Thijssen

Shane Ashford

Shane Ashford

Aaron Selonke

Aaron Selonke

Stanley Thijssen

Stanley Thijssen

Aaron Selonke

Aaron Selonke

Aaron Selonke

Aaron Selonke