This may be a very stupid question, but I've been looking around on the web for a while and whilst I'm using proper syntax, my elements are not being selected in CSS.
I've made a standard sidebar and have it to the right of my screen with flexbox. I'm not looking for anything fancy, but my CSS broke when I renamed it to a class instead of selecting the aside selector, because I intend to use more aside elements and do not want same style on both of them.
Does anyone know how to fix?
.sidebar {
flex: 1;
background-color: white;
align-self: stretch;
border-left: 0.2em solid purple;
}
.sidebar h1 {
margin: 1em;
border-bottom: 0.2em solid purple;
}
.sidebar ul {
display: flex;
flex-direction: column;
list-style: none;
}
<aside class="sidebar">
<h1>This is the sidebar.</h1>
<p>Check out our awesome links!</p>
<ul>
<a href="home.html"><li>Nav Item</li></a>
<a href="#"><li>Nav Item</li></a>
<a href="#"><li>Nav Item</li></a>
<a href="#"><li>Nav Item</li></a>
</ul>
</aside>
The .sidebar itself works but .sidebar h1 and .sidebar ul does not.
.
in the second selector