Bootstrap responsive fix on small tablet & phones

[acciffren]

I use bootstrap 2.2.2 and have the following html markup.\[code\]<div class="container"> <h1>Responsive boxes</h1> <div class="row-fluid"> <div class="span3"> <h3>M. 1</h3> </div> <div class="span3"> <h3>M. 2</h3> </div> <div class="span3"> <h3>M. 3</h3> </div> <div class="span3"> <h3>M. 4</h3> </div> </div> </div> <!-- /container -->\[/code\]and css markup as follow:\[code\]body { background-color: #fff; font-family: 'Cabin', Helvetica, Arial, sans-serif; width: 100%; text-align: center;}h1, h2, h3, h4, h5, h6 { font-family: 'Lobster', Georgia, Times, serif;}h3{ color: #fff; font-size: 139px; line-height: 171px;}.span3 { background: rgb(255, 81, 10); height: 200px; overflow: hidden; margin-bottom: 30px;}\[/code\]This markup works fine on desktop, when I resize the viewport (e.g. iphone) boxes are smaller as expected, but right margin becomes removed. There is only left margin. I want the left and right margin to be aligned.How to solve this issue?