I have the following two files where home inherits from base.
base.html:
<html>
<head>
<style type="text/css">
.sidenav {
height:100%;
width:160px;
position: fixed;
z-index:1;
top:0;
left:0;
background-color:#111;
overflow-x: :hidden;
padding-top:20px;
}
.sidenav a {
padding:6px 8px 6px 16px;
text-decoration: none;
font-size:25px;
color: #818181;
display:block;
}
.sidenav a:hover{
color:#f1f1f1;
}
.main{
margin-left:300px;
padding: 0px 10px;
}
</style>
<title>{% block title %}Brandon's Site{% endblock %}</title>
</head>
<body>
<div class="sidenav">
<a href="/">Home</a>
</div>
{% block content %}
{% endblock %}
</body>
</html>
home.html:
{%extends 'main/base.html' %}
<head>
<style type="text/css">
.main{
margin-left:300px;
padding: 0px 10px;
}
</style>
</head>
<div class = "main">
{% block content %}
Add New Plant
<form method = "post" action = "">
{% csrf_token %}
{{form.as_p}}
<button type = "submit", name = "save">Add New Plant</button>
</form>
{% endblock %}
</div>
</html>
However, the form in home.html for some reason isn't recognizing the left margin and is stuck under the sidebar that I've created to the left. It ends up looking like this:
Why isn't it offset to the right like the CSS implies?