How to prevent Twitter Bootstrap changing margins as width of page is extended

I was practising with the Bootstrap 3 css. I planed on having a fixed footer and a fixed navigation bar on my webpage. So to do this I used margins of 5% to make the content in the middle of my page to not be covered by the footer or header. To format the text I am using the container class which comes with bootstrap. This can be seen in the picture below.

This looked as it should. However I soon discovered that when the width of the page is expanded it increases the margin size. Like in the picture shown below.

So is there a way to limit how much the margins can extend on the container class in bootstrap. For example something similar too

.addThisClassToTagWithClassContainer {
     max-margin-top:5%;
     max-margin-bottom:5%;
     max-margin-left:5%;
     max-margin-right:5%;
}

There is a copy of the files here if you believe this is a coding error that I have made.