Why does my ID not fill the width of the page the way my CLASS elements do?

Problem

I am making a webpage and when viewed at the smallest horizontal resolution, my ID element does not fill space on the page the way my CLASS elements do, despite having the same properties. What am I missing?

CSS:

     body {
        margin:auto;
        width:95%;
        text-align:center;
        background-image:url('images/grey_sandbag.png');
    }
    .banner h1 {
        margin-top:0;
    }
    .banner {
        font-family:'Lemon', cursive;
        font-size:1em;
        padding:0 1em;
        color:#464a4d;
        background: radial-gradient(#edd1ca, #9e885d, #677564);
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
        box-shadow:5px 5px 5px #888888;
    }
    .nav li {
        background: radial-gradient(#d0d499, #d0d499, #e8c997);
        color:#464a4d;
        margin:0.7em;
        border:solid 2px #d0d499;
        border-radius:2em;
        box-shadow:5px 5px 5px #888888;
        font-weight:bold;
        font-size:1em;
        display:block;
        line-height:1.5em;
        padding:0em 1.8em;
    }
    .nav ul {
        list-style:none;
        padding-left:0;
        line-height: 1.5em;
        margin: 1em 0em 1em;
    }
    div.display {
        margin: 1em 1em 1em 0;
        padding: .4em;
        border:1px solid #ffe187;
        height:auto;
        width:95%;
        display:block;
        text-align:center;
        box-shadow:5px 5px 5px #888888;
        border-radius:2em;
        background: radial-gradient(#d4c7ac, #d4c7ac, #ffe187)
    }
    div.display img {
        display:inline;
        margin:5px;
        border:1px solid #d4c7ac;
        width:90%;
        border-radius:1em;
    }
    div.desc {
        text-align:center;
        font-weight:normal;
        padding:1%;
        width:95%;
    }
    div#bio-box {
        margin: 1em 0em 1em 0;
        padding: .4em;
        border:1px solid #ffe187;
        height:auto;
        width:95%;
        float:right;
        text-align:center;
        box-shadow:5px 5px 5px #888888;
        border-radius:2em;
        background: radial-gradient(#d4c7ac, #d4c7ac, #ffe187)
    }
    div#bio-box img {
        display:inline;
        margin:5px;
        border:1px solid #d4c7ac;
        width:90%;
        border-radius:1em;
    }
    @media screen and (min-width : 550px) {
        .nav ul {
            width:34%;
            float:right;
            ;
        }
        div.display-container {
            width:65%;
            float:left;
            margin-right:0px;
            padding-right:0;
        }
    }
    div#bio-box {
        width:30%;
        float:right;
    }
    div#bio-box img {
        float:left;
    }
    @media screen and (min-width : 800px) {
        .nav ul {
            float:none;
            display:inline;
        }
        .nav li {
            display:inline;
        }
        div.display-container {
            width:80%;
            float:left;
        }
        div#bio-box {
            width:15%;
            float:right;
        }
        div#bio-box img {
            float:left;
        }
    }
    @media screen and (min-width : 950px) {
        body {
            max-width:1400px;
        }
        .nav li {
            margin:0 1.4em;
        }
        div.display-container {
            width:90%;
            float:none;
            margin:0 5%;
        }
        div.display {
            width:43%;
            float:left;
            margin-left:1.5em;
        }
        div#bio-box {
            margin:0 25%;
            width:50%;
        }
        div#bio-box h2 {
            float:right;
            width:60%;
            margin-top:.2em;
        }
        div#bio-box p {
            float:right;
        }
        div#bio-box img {
            width:35%;
            float:left;
        }
    }

HTML:

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Earth Weaver Studios</title>
        <link href='http://fonts.googleapis.com/css?family=Lemon' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="custom.css">
    </head>

    <body>
        <div class="container">
            <div class="banner">
                <h1>Earth Weaver Studios</h1>
            </div>
            <div class="nav">
                <ul>
                    <li>Dining</li>
                    <li>Jewelry</li>
                    <li>Ceramics</li>
                    <li>Blacksmithing</li>
                    <li>Orders</li>
                </ul>
            </div>
            <div class="display-container">
                <div class="display">
                    <img src="images/cups.png">
                    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </div>
                <div class="display">
                    <img src="images/ring.png">
                    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </div>
            </div>
            <div id="bio-box">
                    <h2>The Weaver Himself</h2>

                <img src="images/nate.png">
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            </div>
        </div>
    </body>

</html>
Problem courtesy of: yefimovich

Solution

This line is the issue

div#bio-box {
    width: 30%;
    float: right;
} 

Try removing the 30% width after certain pixel width like:

@media screen and (max-width: 799px){
    div#bio-box {
        width: 100% !important;
    } 
}

The !important should only really be for testing purposes you could do something like this instead.

div#bio-box {
    float: right;
} 

@media screen and (max-width: 699px){
    div#bio-box {
        width: 30% !important;
    } 
}

@media screen and (min-width: 700px){
    div#bio-box {
        width: 100% !important;
    }
} 
Solution courtesy of: Purple Hexagon

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.