Flexible html mockup with align - html

Question

I have structure like:
<style>
#main{
max-width: 500px;
margin: 0 auto;
overflow: hidden;
border: 1px solid red;
}
#container{
margin-right: -50px;
}
.block{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid grey;
margin-right: 30px;
}
</style>
<div id="main">
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
If I have wide width it looks like
http://i.stack.imgur.com/3I1yM.png
It's ok.
But if I use narrow it sucks
I need that internal bloks is aligned to center like this
http://i.stack.imgur.com/5GXMJ.png

Answer 1

Hi what you need here is the property text-align:center:
#container{
margin-right: -50px;
text-align:center;
}
The demo http://jsfiddle.net/u5HHc/

Answer 2

What about this?
http://jsfiddle.net/ALR8P/3/
Remove margin from blocks, user text-align justify and add word spacing if you want some fixed space for your blocks on the last row.
#container {
letter-spacing: 10px; //word-spacing: 10px; //to space blocks on last row
text-align: justify; //to align everything to the borders on the first lines
padding: 0px 10px; //to separate the blocks from the borders a little
}
.block {
margin-right: 0px;
}
It looks wrong when width is too small and only one block fits on each row but maybe there you need some media query to make your css responsive to fix that on that special case.
EDIT: letter-spacing works better crossbrowser http://jsfiddle.net/ALR8P/5/, you may want letter-spacing: 30px; since your margin was 30px