Grid 960 smaller than the screen

Navigation
1

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

Include all css files correctly inside the header, but when I use a class for example container_16 the size does not fit the screen size, this is a bit obviu because the grid system of 16 has only 940px, but also I have tried to use the file 960_24_col.css , after including this file the daughters divs of container_24 do not obey airs stipulated by class, they all appear with witdh "auto" and do not create the "boxes"

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

BelowisthehtmlthatI'musing.

<divid="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>
    
asked by anonymous 28.10.2015 / 19:13

1 answer

3

To always achieve the full width of the screen, you would need to adapt this grid to a percentage by 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 do not know if it's worth much ... I recommend using Bootstrap (or Foundation) with the .container-fluid class

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

    
05.11.2015 / 19:43
Error: Parameter index out of range (1 number of parameters, which is 0) Calculating javascript and playing in html table