I'm struggling to make my internal div fill the external div even though it's set at width: 100%. I suspect the padding might be causing the issue, but I can't be sure. Any ideas on how I can get the internal div to match the width of the external div? Thanks.
Check out my jsfiddle for reference
Here's the HTML:
<html>
<head>
<title>Clinical Molecular Incident Reporting System</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'error_tracking/css/master.css' %}">
</head>
<body>
<div id="content">
<div id="pagetop">
<b>Clinical Molecular Incident Reporting System</b>
<span id="navigation">
{% if user.is_authenticated %}
<a href="/search_incidents/">search incidents</a> |
<a href="/report_incident/">report incident</a> |
<a href="/resolve_incident/">resolve incident</a>
<span id="user-info">{{ user.username }} | <a href="/logout/">logout</a></span>
{% else %}
<span id="user-info"><a href="/login/">Login</a></span>
{% endif %}
</span>
</div>
{% block content %}
{% endblock content %}
</div>
</body>
</html>
And here's the CSS:
html,body {font-family: Verdana; font-size: 16px;}
#content {
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #F6F6EF;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
padding: 0px 10px 10px 10px;
}
#pagetop {
width: 100%;
background-color: #04B4AE;
font-family: Verdana;
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
padding: 10px;
}
#pagetop a:link {color:#000; text-decoration: none;} /* unvisited link */
#pagetop a:visited {color:#000; text-decoration: none;} /* visited link */
#pagetop a:hover {color:#000; text-decoration: underline;} /* mouse over link */
#pagetop a:active {color:#000; text-decoration: none;} /* selected link */
#navigation{padding-left: 15px;}
#user-info {float: right;}