Grid 960 smaller than screen

I'm starting to use the 960.gs system grid css however I am having some issues related to screen size, please correct me if I am wrong.

Includes all css files correctly inside the header only when I use a class for example container_16 the size does not suit the size of the screen, this is a bit 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 include this file as divs daughters of container_24 do not obey AR widths stipulated by class, they all appear with the witdh "auto" and do not create the"boxes"

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

insert the description of the image here

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>
 1
Author: RFL, 2015-10-28

1 answers

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

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 worth it... I recommend using Bootstrap (or Foundation) with Class .container-fluid

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

 3
Author: T. Bako, 2015-11-05 18:43:45