Parent div not wrapping child div when screen is resized - html

Question

I'm trying to learn HTML/CSS and JavaScript+jQuery by using Codeacademy and working on my own little project to practice. However, I am stuck with a very simple problem:
I want a parent div to be displayed across the entire page. I can do this successfully (see fiddler). 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 fiddler). Basically, I want my parent div to always wrap its child divs, and to always be displayed across the entire screen.
Fiddler Links:
Link 1
Link 2
Relevant HTML:
<div id="topnav">
<a id="logo" class="navlink clearfix">DreamTeam</a>
<a id="logo" class="navlink clearfix">Strikers</a>
<a id="logo" class="navlink clearfix">Midfielders</a>
<a id="logo" class="navlink clearfix"><div class="navlink clearfix">Defenders</a>
<a id="logo" class="navlink clearfix">Goalkeepers</a>
</div>
Relevant CSS:
/* 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;
}
Any help would be appreciated. I've gone through many Google searches and other stackoverflow posts, but nothing seems to work for me unless I completely missed an appropriate post. Using things like "overflow: hidden" or creating a wrapper div didn't really work for me. Thank you in advance for any suggestions. It would be great if anyone could point me to an appropriate post that I might have missed too.

Answer 1

How about get rid of the div tag inside a tag. Because you can use class with a tag.
Look at the following example provided by StackOverflow user starx
CSS
a.divlink {
display:block;
width:500px;
height:500px;
float:left;
}
HTML
<div>
<a class="divlink" href="yourlink.html">
The text or elements inside the elements
</a>
<a class="divlink" href="yourlink2.html">
Another text or element
</a>
</div>
Click here for more details

Answer 2

I managed to find a solution to my problem. The problem was not my invalid markup; it was actually the CSS for my #topnav ID. Here's how I changed that ID to get the result I wanted:
#topnav {
background-color: #EDEDED;
height: 50px;
min-width: 1050px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
The key changes are below the height property.