Centering modules

How do I center the modules? I found this other article, but it doesn't seem to be working. Basically I would like for the boxes to be centered instead of aligning them to the left. My template is responsive, so when the browser size changes, there is a huge gap on the right side of the video boxes, photo boxes, etc.

I found this thread:

http://www.boonex.com/forums/?action=goto&search=1#topic/Centering-Public-Photos-on-Homepage.htm

here is how I have the code in default.css

/* block content margins/paddings */

.bx-def-bc-margin {

    margin: 20px 20px 20px 20px;

}

.bx-def-bc-padding {

    padding: 20px 20px 20px 20px;

}

.bx-def-bc-margin-sec {

    margin: 10px 10px 10px 10px;

}

.bx-def-bc-padding-sec {

    padding: 10px 10px 10px 10px;

}

.bx-def-bc-margin-thd {

    margin: 15px 15px 15px 15px;

}

.bx-def-bc-padding-thd {

    margin-left: auto;

    margin-right: auto;

    width: 100%;

}

here is what I added into my custom.css from my custom template

div.page_block_container

{

    margin-left: auto;

    margin-right: auto;

    width: 100%;

}

auto works when you have a fixed size width.  There are some tricks for trying to auto centre a division/block with unknown width.

 Try using min-width:100px; (or whatever) under the width:100% or change the 100% to 99%