Problems with borders and a fluid layout

I am trying to make a fluid webpage with borders around it but the moment I used css to make it fluid, the right border around the outside goes out of place

http://jsfiddle.net/9jtxjb1s/

The HTML code:

<!DOCTYPE html>
                <html>
                <body>
                    <div class="gridContainer clearfix">
                    <div id="LayoutDiv1">
                    <div id="container">
                        <header>
                            <h1>Heading 1</h1>
                            <h2>Heading 2</h2>
                        </header>
                        <nav>
                            <ul>
                                <li><a ="index.html">Home</a></li>
                                <li><a ="link1.html">Link 1</a>
                                    <ul>
                                        <li><a ="gallery1.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a ="link2.html">Link 2</a>
                                    <ul>
                                        <li><a ="gallery2.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a ="link3.html">Link 3</a>
                                    <ul>
                                        <li><a ="gallery3.html">Gallery</a></li>
                                    </ul>
                                </li>
                                <li><a ="link4.html">Link 4</a></li>
                            </ul>
                        </nav>

                        <section>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
                    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

                        </section>
                        <footer>
                            <p>&copy; Test</p>
                        </footer>
                    </div>
                    </div>
                    </div>
                </body>
                </html>

Styling CSS:

#container{
                    background:#228b22;
                    float:left;
                    border:1px solid #000000;
                    width:98%;
                }

                body {
                    font-family:Arial, Helvetica Neue, Helvetica, sans-serif;
                    font-size:90%;
                    margin:20px auto;
                    text-align:center;
                    line-height:1.4em;
                    width:98%;
                    background:white;
                }

                header, section, article, footer,  nav{
                    padding:10px 20px 20px;
                    margin:10px;
                    float:left;
                    width:90%;
                    border:1px solid #000000;
                }

                header {
                    display:block;
                    position:relative;
                    text-align:left;
                }

                header h1 {
                    font-size:2.3em;
                    text-transform:none;
                    text-align:center;
                }

                header h2 {
                    margin:10px 0px 20px;
                    font-size:1.3em;
                    text-align:center;
                }

                nav {
                    float:left;
                    text-align:center;
                    display:block;
                }

                nav ul{
                    margin-left:15%;
                    padding:0;
                    list-style:none;
                    text-align:center;
                }

                nav ul li{
                    float:left;
                    width:150px;
                    height:30px;
                    line-height:30px;
                    text-align:center;
                    background:#4ea24e;
                    border:1px solid #000000;

                }

                nav ul li a{
                    text-decoration:none;
                    color:black;
                }

                nav ul li li{
                    background:#4ea24e;
                    color:#fff;
                    display:none;
                    float:left;
                    margin-left:-17.9%;
                }

                nav ul li li:hover{
                    background:#7ab97a;
                }

                nav ul li li a{
                    text-decoration:#8A5C2E;
                    color:#black;
                }

And finally, the fluid grid code:

        img, object, embed, video {
            max-width: 100%;
        }
        /* IE 6 does not support max-width so default to width 100% */
        .ie6 img {
            width:100%;
        }

        /* Mobile Layout: 480px and below. */

        .gridContainer {
            margin-left: auto;
            margin-right: auto;
            width: 87.36%;
            padding-left: 1.82%;
            padding-right: 1.82%;
        }

        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
        }

        /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

        @media only screen and (min-width: 481px) {
        .gridContainer {
            width: 90.675%;
            padding-left: 1.1625%;
            padding-right: 1.1625%;
        }
        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
            border:1px solid #000000;
        }
        }

        /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

        @media only screen and (min-width: 769px) {
        .gridContainer {
            width: 88.2%;
            max-width: 1232px;
            padding-left: 0.9%;
            padding-right: 0.9%;
            margin: auto;
        }
        #LayoutDiv1 {
            clear: both;
            float: left;
            margin-left: 0;
            width: 100%;
            display: block;
        }
        }

Any help would be greatly appreciated


Download problems.with.borders.and.a.fluid.layout.zip
Direct Link


Download


Download problems.with.borders.and.a.fluid.layout.zip
Mediafire


Download


Download problems.with.borders.and.a.fluid.layout.zip
4Downfiles


Download

Both comments and pings are currently closed.

Comments are closed.