Apologies in advance for the seemingly trivial and highly specific question, but I'm really struggling with this one.
I'm attempting to style two <li> elements that are nested within a
<nav><ul><li><a href="">text</a></li></ul></nav>I can't seem to pinpoint what's causing the issue in my code, preventing it from rendering correctly.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html,
body {
height: 100vh;
font-family: 'Roboto', sans-serif;
color: #ffffff;
background-color: #0e2a47;
}
.Titlebanner {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-color: #48ffd5;
border-radius: 1em;
}
.Titlebanner h1>a {
color: #ffffff;
font-weight: 700;
font-size: 2em;
text-decoration: none;
border-bottom: 2px solid #48ffd5;
}
ul {
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
padding: 0;
}
nav li {
list-style: none;
display: flex;
margin: 2em;
padding: 1em;
border-radius: 1em;
border: 2px solid #48ffd5;
}
/* --------------Here is what I’ve tried to modify but doesn’t work-------*/
a:hover,
a:visited,
a:link,
a:active {
color: white;
text-decoration: none;
}
/*---------------------------------------*/
.body {
display: flex;
flex-direction: row;
}
.ranking {
width: 8%;
height: 4em;
background-color: grey;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0.5em;
}
.ranking>ul {
padding: 0;
display: flex;
flex-direction: column;
}
.ranking>ul>li {
margin: auto
}
.Analysis {
display: flex;
flex-direction: row;
margin: auto;
width: 80%;
justify-content: center;
text-align: justify;
}
/*---------------------- and here for the footer -------*/
footer>a {
display: block;
width: 30%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: white;
}
/*-----------------------------------------------*/<body>
<header>
<div class="Titlebanner">
<h1><a href="index.html">Impact of Privacy Policies on Users’ Lives</a></h1>
</div>
<!------------- here is the part I’m trying to style----->
<nav>
<ul>
<li><a href="result.html">Results</a></li>
<li><a href="analysis.html">Analysis</a></li>
</ul>
</nav>
<!----------------------------------------------------->
</header>
<div class="body">
<div class="ranking" id="ranking">
<ul>
<li>First Place</li>
<li>Second Place</li>
</ul>
</div>
<div class="Analysis">
text
</div>
</div>
</body>
<!----------------- and the footer I’m trying to style as well------->
<footer>
<span class="">
<a href="">About us</a>
</span>
</footer>
<!------------------------------------------------------------->