CSS 3 Column Layout Collapses Under Large Screen Width - html

Question

I have the following section of code for by CSS 3-Column Layout. However under a very large screen width, the first column collapses (around 2000px). I added the code for the navigation, as the links could be impacting the display of the columns.
CSS and HTML
#container
{
width: 75%;
margin-left: auto;
margin-right: auto;
}
header h1
{
font-size: 40px;
float: left;
font-weight: 100;
}
header h1 a
{
text-decoration: none;
color: black;
}
header nav
{
float: right;
}
header nav ul
{
list-style-type: none;
margin: 0;
vertical-align: middle;
line-height: normal;
float: right;
z-index: 999;
position: relative; /* add this */
}
header nav ul li
{
line-height: 15px;
float: left;
padding: 45px;
font-size: 22px;
font-weight: 100;
text-align: center;
}
header nav ul li a
{
color: black;
text-decoration: none;
}
.content
{
margin-left: auto;
margin-right: auto;
width: 75%;
font-size: 20px;
line-height: 50px;
}
#media screen and (max-width: 1160px) {
header h1
{
float: none;
text-align: center;
font-size: 36px;
}
header nav
{
width: 100%;
margin-right: 20px;
}
header nav ul
{
float: none;
text-align: center;
}
header nav ul li
{
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 25px;
}
}
.col {
float: left;
}
.col-1-3 {
width: 33%
}
.col-1-3 a {
font-weight: bold;
}
<div id="container">
<header>
<h1><strong>Henry</strong><span id="notbold">+Applications</span></h1>
<nav>
<ul>
<li id="me"><div id="meanimation">Home</div></li>
<li id="project"><div id="projectanimation">Project</div></li>
<li id="contact"><div id="contactanimation">Contact</div></li>
</ul>
</nav>
</header>
</div>
<br><br><br><br>
<div class="content">
<div class="col col-1-3"><p><em>Email</em></p><p>This is the quickest way to contact me!</p>
The Fastest Way
</div>
<div class="col col-1-3"><p><em>Phone</em></p><p>You can get in touch with me with a phone call or text!</p>
Text Me
</div>
<div class="col col-1-3"><p><em>Public Profile</em></p><p>Right now, I only have a Google+ profile, but I am sure to expand soon.</p>
Google+<br>
StackOverflow
</div>
</div>

Answer 1

I added overflow: hidden; to .content and I got the good result.
.content {
margin-left: auto;
margin-right: auto;
width: 75%;
font-size: 20px;
line-height: 50px;
overflow: hidden;
}