why are my buttons not on top of each other when I have already used display: block?-CodePudding

i want 2 of my buttons to be stacked (on top of each other). however, after using display: block, the buttons are still side by side. here are my html & css code!

does anyone know why? i had done my research and display:block is the way to code my buttons to make them on top of each other. would appreciate any help!

thank you in advance for everyone that have helped me! i'm really grateful. :)

.homepage_viewcurrentproject
{
  font-family : Times New Roman;
  font-size : 28px;
  color : #FFFFFF;
  color : rgb(255, 255, 255);
}
nav#button
{
  float: left;
    padding: 15px;
    width: 150px;
    height:350px;

  margin-top: 15px;
  margin-left: 65px;

  text-align: center;
}

nav#button ul li
{
  margin: 0; /*Setting margins and padding to 0 to remove browser default settings*/
  padding: 0;
  list-style-type: none; /*remove the bullets*/
  color: white;
}

nav#button li a
{
  display: block;    /*to allow changes of- width,height, padding and margin around the link*/
    width: 350px; /* length of button */
    padding: 5px 10px; /*top and bottom:5px left and right:10px*/
    background-color: #25374C;
    text-decoration: none; /* remove the underline of hyperlink */
    margin:10px;
    padding: 30px 40px;
    background: #25374C;
    border-radius: 18px;
}

nav#button a:link{
  color: white;
  text-decoration: none;
}
nav#button a:visited{
  color: white;
}

nav#button li a:hover,           /*add a style to an element when you mouse over it*/
button li a:focus                     /*add a style to an element that has keyboard input focus*/
{ 
      background-color: #2c425c;
    color: #CCFFC5;  
}
nav#button li a:active                   /*add a style to an element that is activated*/
{
    background-color: #25374C;
}

    <nav id="button" >
        <ul>
            <li>
                <a href="https://drive.google.com/file/d/1c-vk23Mb67tO11-Ae3qzOWPpY6koQqn5/view?usp=sharing">Check out my Python Study</a>
            </li>
            <li>
                <a href="images/coffeewebsite.jpeg">View latest project</a>
            </li>
        </ul>
    </nav>

CodePudding user response：

You can use this method:

nav ul {
   display: flex;
   flex-direction: column;
}

CodePudding user response：

It is already stacked as you want. I ain't getting your problem