Grid 960 smaller than the screen

Question

I’m starting to use the 960.Gs system css however I am having some problems related to screen size, please correct me if I am wrong.

includes all css files correctly within the header only when using a class for example container_16 the size does not fit the size of the screen, this is a little obvious because the grid system of 16 has only 940px only that I have also tried to use the file 960_24_col.css, after including this file the daughters of container_24do not obey air widths stipulated by class, they all appear with the witdh "self" and do not create the "little boxes"

Can you see in the image below the white space that is on the left side? how could I do so fill up the entire screen? (the image is using the container_16)

Below is the html I’m using.

<div id="container" class="container_16">
        <nav class="grid_16">
            Header
        </nav>

        <section id="menu1" class="grid_16">
            <img src="assets/img/banner.png" />
        </section>

        <div class="grid_16">
            <h2>Produtos</h2>
        </div>

        <div id="prod1" class="grid_4">
            <p>
                <img src="assets/img/prod1.png" height="258" width="243">
                Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
            </p>
        </div>
        <div id="prod2" class="grid_4">
            <p>
                <img src="assets/img/prod1.png" height="258" width="243">
                Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
            </p>
        </div>
        <div id="prod3" class="grid_4">
            <p>
                <img src="assets/img/prod1.png" height="258" width="243">
                Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
            </p>
        </div>
        <div id="prod4" class="grid_4">
            <p>
                <img src="assets/img/prod1.png" height="258" width="243">
                Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
            </p>
        </div>

        <div id="arvore" class="grid_8">
            <p>
                <img src="assets/img/arvore.png" />
                Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
            </p>
        </div>
        <div id="sustentabilidade" class="grid_8">
            <h1>Sustentabilidade</h1>
            <p>
                Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
            </p>
        </div>


        <footer class="grid_16">
            <h1>footer</h1>
        </footer>
    </div>

Answer 1

To always achieve the full width of the screen, you would need to adapt this grid to percentage by recalculating the PX into %.

Something like:

.container_16 {width:100%}
.grid_1 {width:6.25%} /* 100% / 16 */
.grid_2 {width:12.5%} /* 100% / 8 */

I don’t know if it’s really worth it... I recommend using Bootstrap (or Foundation) with the class .container-Fluid

So your container will have 100% of the screen and the internal Divs the equivalent percentage.