How can I center a relative div?

Here's a start. Take a look at the following CSS:

#bottom {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFF;}

#secondsection {
    background-size: 100% auto;
    background-size: cover;
    color: #eaeaf0;
    margin-left: 7%;
    margin-right: 7%;
    padding-top: 35px;
    padding-bottom: 35px;
    position: relative;
    border: 1px dotted red;
}

#ss_top {
    width: 100%;
    height: 100%;
    border: 1px dotted blue;
    overflow: auto;
}
#ss_top p {
    margin: 0;
}

.ss_title {
    display: inline-block;
    color: #000000;
    font-family: 'Eurostile';
    font-size: 35px;
    text-transform: uppercase;}

.ss_title2 {
    color: #a5a5a5;}

#gallerybutton {
    position: relative;
    display: inline;
    float: right;
    margin-right: 0%;
    margin-top: 50px;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

#projects {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
    padding: 175px 0px 0px 0px;
    border: 1px dashed blue;
}

#pr_one, #pr_two {
    display: block;
    border: 2px dashed blue;
    overflow: auto;
    text-align: center;
}

.pr_img {
    display: inline-block;
    width: 30%;
    margin-right: 1%;
    margin-bottom: 1%;
}
.pr_img img {
    display: inline-block;
    width: 100%;
    height: auto;
}

#viewprofilebutton {
    position: relative;
    left: -75px;
    margin-left: 50%;
    margin-top: 3.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

      

        
        
        
      

    

I started by getting rid of the floats in the header #ss_top

, you don't need that.

For a panel #projects

with images, floats cause centering problems.

In #pr_one

and #pr_two

add text-align: center

and then use display: inline-block

on .pr_img

, this will center the alignment of your images (give / take some margins) and then apply a suitable say width 30%

so that the images are automatically scaled to form a row of three.

Now you need to apply display: inline-block

to images ( .pr_img img

) so that you can now use margins to control the step up / down / left / right.

See a demo at: http://jsfiddle.net/audetwebdesign/rmtpy6t0/

Note. You still have some polish, but at least it clarifies the problems with centering and floating elements.

Responsive Design: If you need 2 or 3 images in a row depending on your screen size, you need to know about media queries. However, since you wrapped 3 images in div

, you are locked by 3 lines, but that might be fine.