I am making a django website and I am loading in my css and the html as static.
I am using two css files: the first is for the bootstrap that I am using, and the second is my own css. However, the bootstrap variables are shown, but my own variables are not.
I have tried remaking the css document and changing from "class" to "id"
html code:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Wedding planner - Dashboard</title>
<link href="{% static 'css/main.css' %}" rel="stylesheet" />
<!-- Bootstrap -->
<link href="{% static 'css/bootstrap-4.3.1.css' %}" rel="stylesheet" />
</head>
<body>
{% block content %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'Home' %}">Wedding Planer</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Plans</a>
</li>
</ul>
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
User
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% if user.is_authenticated%}
<a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
{% else %}
<a class="dropdown-item" href="login">Login</a>
<a class="dropdown-item" href="register">Register</a>
{% endif %}
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-4">Welcome, {{ user.username }}</h1>
<p class="lead">
{{ user.username }} this is the page where you can control all your
wedding planing
</p>
</div>
<div id="sidemenu">
<ul>
<li><a href="#">Guest</a></li>
<li><a href="#">Shop list</a></li>
<li><a href="#">lorem</a></li>
<li><a href="#">lorem</a></li>
<li><a href="#">lorem</a></li>
</ul>
</div>
<!-- <div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">Start Bootstrap</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light"
>Dashboard</a
>
<a href="#" class="list-group-item list-group-item-action bg-light"
>Shortcuts</a
>
<a href="#" class="list-group-item list-group-item-action bg-light"
>Overview</a
>
<a href="#" class="list-group-item list-group-item-action bg-light"
>Events</a
>
<a href="#" class="list-group-item list-group-item-action bg-light"
>Profile</a
>
<a href="#" class="list-group-item list-group-item-action bg-light"
>Status</a
>
</div>
</div> -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap-4.3.1.js' %}"></script>
{% endblock %}
</body>
</html>
css code:
.inthemiddle {
text-align: center;
padding-top: 100px;
}
.dropdown-menu {
position: absolute;
right: 0px;
}
.Register {
align-content: center;
padding-top: 100px;
}
#sidemenu ul {
padding-left: 50px;
background-color: #c7c8d4;
}
#sidemenu li {
list-style-type: none;
}
a {
color: black;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin 0.25s ease-out;
-moz-transition: margin 0.25s ease-out;
-o-transition: margin 0.25s ease-out;
transition: margin 0.25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
What I am trying to do is to change the list to have a background color and remove the dots before the list but it is still showing and nothing is changing
