Currently, I am in the process of developing a website with Django 1.9 and manually coding all the HTML components. However, I am facing some challenges.
One of the elements I created is the navigation bar, for which I utilized the following HTML code:
https://i.sstatic.net/3ptTP.png
Additionally, I applied the below CSS code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0,0,0,0.3);
float: right;
padding-right: 25px;
}
li {
float: right;
display: inline;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000000;
color: white;
}
nav{
width: 960px;
margin: 0 auto;
}
However, when I try to code a list in another section, it ends up looking like the navigation list. For example:
https://i.sstatic.net/BK8le.png
displays as:
https://i.sstatic.net/qJpvq.png
Despite linking them to the same CSS, I attempted using two separate CSS files, but encountered an error due to them being in the same HTML file. Any assistance would be greatly appreciated.