Why is my side navigation bar overlapping the text on the web pages-CodePudding

So I am using django to create a website but there must be a problem in my CSS and or HTML code, when I run the server the text on the pages is being covered by the sidenav bar I have. I previously had a width set for the sidenav but removed it but that didn't work either, here is the code:

<html>
<head>
    <style type="text/css">
        .sidenav {
            height: 100%;
            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: 160px;
            padding: 0px 10px;
        }


    </style>
    <title>{% block title %} My Website {% endblock %}</title>
</head>

<body>
    <div class="sidenav">
        <a href="/home">Home</a> 
        <a href="/create">Create</a>
        <a href="/6">View</a>
    </div>

    <div id="content", name="content"></div>
    {% block content %}
    {% endblock %}
</body>
</html>

CodePudding user response：

You are not using the main class you defined. Also your { block content } doesn't have a <div> around it. You could try creating a <div> for the sidebar and a <div> for the { block content }