CSS buttons overlapping
<p>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. </p>

<p>Relevant CSS code: </p>

<pre><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;
}
</code></pre>

<p>Relevant HTML:</p>

<pre><code>&lt;div class="navBar"&gt;
      &lt;a href="/"&gt;&lt;button type="button" class="navBar"&gt;Home&lt;/button&gt;&lt;/a&gt;
      &lt;a href="/chat"&gt;&lt;button type="button" class="navBar"&gt;Community&lt;/button&gt;&lt;/a&gt;
      &lt;a href="/events"&gt;&lt;button type="button" class="navBar"&gt;Events&lt;/button&gt;&lt;/a&gt;
      &lt;a href="/prideprom"&gt;&lt;button type="button" class="navBar" class="navBar"&gt;Pride Prom&lt;/button&gt;&lt;/a&gt;
      &lt;a href="/rights"&gt;&lt;button type="button" class="navBar"&gt;Resources&lt;/button&gt;&lt;/a&gt;
      &lt;a href="/funds"&gt;&lt;button type="button" class="navBar"&gt;Fundraising&lt;/button&gt;&lt;/a&gt;
        &lt;a href="/profile/TrueTransRebel"&gt;&lt;button type="button" class="navBar"&gt;current_user.username&lt;/button&gt;&lt;/a&gt;
        &lt;a rel="nofollow" data-method="delete" href="/users/sign_out"&gt;&lt;button type="button" class="navBar" class="navBar"&gt;Log Out&lt;/button&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>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</p>

<p><a href="http://i.stack.imgur.com/Cw7UV.png" rel="nofollow">This is what it looks like presently</a></p>