Parent div not wrapping child div
I want a parent div to be displayed across the entire page. I can do this successfully (see screenshot). When I resize the browser screen, however; my parent div no longer fits across the entire page, which causes its right most child div to be displayed outside of the parent div (see screenshot). Basically, I want my parent div to always wrap its child divs, and to always be displayed across the entire screen.
HTML
<!DOCTYPE HTML>
<body>
<span class = "dvr">Satt til opptak :<br> SVT2 Sex, död och meningen med livet Idéer om själens liv efter döden, synder och gudar har format människans tankar i tusentals år. Vad händer om vi struntar i religionen och låter vetenskapen styra våra liv?</span>
<span class = "dvr_headliner">alle programmer på opptak :</span>
<span class = "dvr">NRK1 HD Kronprins Haakon - veien til et konge... 4500 </span>
<span class = "dvr">SVT2 Sex, död och meningen med livet 3000 </span>
</body>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding; 0
}
/* ID's */
#title {
height: 65px;
width: 99%;
margin: auto;
}
/* ID FOR PARENT DIV */
#topnav {
position: relative;
background-color: #EDEDED;
height: 70px;
width: 100%;
white-space: nowrap;
}
#logo {
width: 300px;
font-weight: bold;
margin-left: 5px;
font-size: 28px;
height: auto;
}
#lastlink {
border: none;
}
/* CLASS FOR CHILD DIVS */
.navlink {
position: relative;
font-family: Century Gothic;
height: auto;
font-size: 24px;
text-align: left;
line-height: 65px;
width: 175px;
border-right: 1px solid #bdbdbd;
}
.navlink:hover {
color: #a5a5a5;
cursor: pointer;
}
/* REGULAR SELECTORS */
h1 {
text-align: center;
font-family: Arial Black, sans-serif;
}
a {
text-decoration: none;
color: black;
}
a:hover {
font-size: 20px;
font-weight: bold;
}
/* CLEARFIX */
/* I USED CLEARFIX SO THAT
TOPNAV WOULD PROPERLY BE DISPLAYED INLINE*/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}