CSS buttons overlapping - css

Question

I have looked at the other questions about this and none of the solutions work. I have a vertical navBar that is supposed to hold buttons, which are also links, and they work fine when they are the default width but when I change the size all the buttons overlap and the only one that shows up is the last one.
Relevant CSS code:
.navBar{
background-color: #180639;
width: 20%;
color: #B6AFC1;
text-align: center;
border: 1px solid #B6AFC1;
font-family: Century Gothic, sans-serif;
font-size: 40px;
left: 0px;
position: absolute;
overflow: visible;
}
button.navBar{
font-size: 40px;
background-color: #675AFD;
margin: 10px;
padding: 10px;
display: inline-block;
float: left;
}
Relevant HTML:
<div class="navBar">
<button type="button" class="navBar">Home</button>
<button type="button" class="navBar">Community</button>
<button type="button" class="navBar">Events</button>
<button type="button" class="navBar" class="navBar">Pride Prom</button>
<button type="button" class="navBar">Resources</button>
<button type="button" class="navBar">Fundraising</button>
<button type="button" class="navBar">current_user.username</button>
<a rel="nofollow" data-method="delete" href="/users/sign_out"><button type="button" class="navBar" class="navBar">Log Out</button></a>
</div>
I am writing this using Ruby on Rails if that helps anyone come up with a solution. Sorry if the code is messy, I have been looking at a lot of solutions and adding a bunch of random stuff in just trying to force it to work. I should also note the end goal is for all the buttons to line up in a column
This is what it looks like presently

Answer 1

I think what's causing the problem here is that you are applying the position:absolute property to both the navbar <div> and the <button>s. You should separate the classes to apply separate styling to each, independently:
HTML: (note that I changed the classnames for the <button>s to navBar_button
<div class="navBar">
<button type="button" class="navBar_button">Home</button>
<button type="button" class="navBar_button">Community</button>
<button type="button" class="navBar_button">Events</button>
<button type="button" class="navBar_button">Pride Prom</button>
<button type="button" class="navBar_button">Resources</button>
<button type="button" class="navBar_button">Fundraising</button>
<button type="button" class="navBar_button">current_user.username</button>
<a rel="nofollow" data-method="delete" href="/users/sign_out"><button type="button" class="navBar_button" class="navBar">Log Out</button></a>
</div>
And CSS:
.navBar {
background-color: #180639;
width: 20%;
color: #B6AFC1;
text-align: center;
border: 1px solid #B6AFC1;
font-family: Century Gothic, sans-serif;
font-size: 40px;
left: 0px;
position: absolute;
overflow: visible;
}
.navBar_button {
font-size: 40px;
background-color: #675AFD;
margin: 10px;
padding: 10px;
display: inline-block;
}
Also keep in mind that you don't need the float:left if you have the display:inline-block for the buttons, you can use one or the other. And your navBar div is only 20% width, so these elements will essentially stack on top of each other. If you expand that width to 100%, they will then be next to each other along the top.