Coding Question Containers and Centering

Currently, your class of .project-grid and .main-container share the same block level element. It is very difficult if not impossible to center one inside the other because they are essentially the same thing. To fix the problem, make the .main-container the 'parent' <div> of .project-grid-inside.

       <div class="main-container">
             <div class="project-grid-inside">
                    <p>Content for you grids go in here</p>
             </div><!-- end project-grid-inside -->
      </div><!-- end main-container -->

       .main-container {
             width: 300px; /* can be anything  even 100% */
             margin: 0 auto; /* centers parent div within the browser window */
       }

       .project-grid-inside {
            width: 200px; /* can be anything  even 100% */
            margin: 0 auto; /* centers within the parent div */
       }

I hope that works. Keep in mind, if you plan on making this mobile friendly and/or responsive you need to use percentages for your widths. Pixels are not ideal for mobile design since pixel width, density and other elements are factors in how the site functions. Only reason to use pixels for widths are for max-width;

Try changing this:

 .project-grid .project-container {
    float: left;
    margin: 0 10px 52px 10px;
  }
  .project-grid .project-container {
    display: block;
    position: relative;
    width: 210px;
    height: 326px;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    cursor: pointer;
  }

To this:

 .project-grid .project-container {
    float: left;
    margin: 0;
    display: block;
    position: relative;
    width: 25%;
    height: 326px;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    cursor: pointer;
  }

And add this:

.project {
   text-align: center;
}

You can change the value of the .project-grid .project-container width to change the number of projects per row. For instance, to get three per row, change it to 33%.

Dave, I applied yours and it made it more structured but still it seems off center from the nav bar. I have four columns. .main-container { width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden; } #work .main-container .page-title { display: none; } #work .main-container { padding: 55px 0 35px 0; overflow: hidden; } #work .main-container .page-title { display: block;} .project-grid { width: 100%; margin: 0 auto; position:relative; } .project-grid .project-container { float: left; margin: 0 10px 52px 10px; } .project-grid .project-container { display: block; position: relative; width: 210px; height: 326px; top: auto; right: auto; bottom: auto; left: auto; cursor: pointer; }

Aaron, I applied your solution but it's still not centered and now even though it's 25% it only shows 3 columns.

Also, how are you showing your code like that? I keep using ``` or ''' but it doesn't work for me.

Going by the current code on your site, I would guess that the problem is with the margin setting on the project-container class. Try setting it to:

margin: 0;

That should give you four across.

One thing I noticed about my solution is that it breaks your current text formatting in the .project divs. A better solution for the project class might be something like:

.project {
   max-width: 80%;
   margin: 0 auto;
}

Can you re-upload it so I can take a look? You can also do it another way which would be better in my opinion.

       <div class="main-container">
             <div class="project-grid-inside">
                    <p>Content for you grids go in here</p>
             </div><!-- end project-grid-inside -->
      </div><!-- end main-container -->

      .main-container {
              max-width: 960px;
              width: 100%;
              padding: 1% 1.5%; /* first value is top/bottom, second is left/right */
              margin: 0 auto;

              -webkit-box-sizing: border-box; /* need this for Chrome and Safari */
              -moz-box-sizing: border-box; /* need this for Firefox */
              -o-box-sizing: border-box; /* need this for Opera */
              -ms-box-sizing: border-box; /* need this for IE */
              box-sizing: border-box; /* allows padding to be applied INSIDE the div w/o changing the width */
      }

     .project-grid-inside {
             width: 100%;
      }

    .project
            float: left;
            max-width: 100%; /* relative to parent div */
            margin-right: 1%;
            width: 23.75%;
    }

   .project:last-child { /* last .project div  */
           margin-right: 0;
    }         

You might want to check my math on that but the point is to set the parent <div> to a pre-determined size with max-width & width. Assuming you are making this mobile compatible and responsive you should use percentages. Only use pixels to define a max-width (think of a container) and percentages to define the width of the <div>. The .project <div> is 23.75% of its parent <div> with a 1% 'gutter' or spacing. If it's completely wrong I'm sorry I am doing this blind since I don't have direct access to you code, I know this works for me when creating the structure.

To make you code look like that I just click the "Markdown Cheatsheet" and copy the html markdown and add my own content.

One other note not really pertaining this, you should use <section> only to define a section of a <div> or <article>. This comes into play with SEO and using the right tags for the right thing. Google looks at your code to make sure of that. In other words, use <div> for structure and <article> and <section> for defining content within that <div>. Treehouse's SEO course is really nice, I just finished it.

Okay I re-uploaded it.

Aaron, it didn't work. Dave, it's closer but now the descriptions are kind of weird now when I applied your changes. (it's not in the reuploaded version.