Trying to eliminate spaces between list items in CSS/Bulma

I'm currently trying to build a project that mimics a weather app; I want to style some menu options a certain way. Essentially, I want the individual items to take up the full amount of the container they are in, without overflowing. I'm currently using flexbox to distribute them throughout the container, but I'm a bit stuck on how to fill the entire container. My individual menu items are only taking up small amounts of space.

I've tried adjusting the height and width of the boxes, but I feel like there is a better way that is more responsive and less clunky. I've also tried deleting whitespace from my HTML (as per other posts) but this seems to not solve my problem.

Individual menu items in green – I want them to fill up the container equally (represented by the reddish boxes I've superimposed.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather</title>
    <link rel="stylesheet" href="app.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
  <input type="text" placeholder="Timbuktu" name="location">
  <button>Click for current weather!</button>
  <ul id="temps"></ul>
    <section>
        <div class="container">
            <div class="card">
                <header class="card-header">
                    <h1 class="card-header-title">Mitch's Weather Widget</h1>
                </header>
                <div class="card-content">
                    <div class="columns is-mobile">
                        <div class="column" id="menu-column">
                            <aside class="menu">
                                <ul class="menu-list">
                                  <li><a id="current">Current Weather</a></li>
                                  <li><a id="hourly">Hourly Forecast</a></li>
                                  <li><a id="weekly">Next 7 Days</a></li>
                                  <li><a id="maps">Maps</a></li>
                                </ul>
                            </aside>
                        </div>
                        <div class="column is-three-quarters">
                            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem iste minus quae numquam perspiciatis accusantium incidunt excepturi at quia aspernatur, nulla minima illum rerum quasi quisquam tempore labore nemo repellat.
                            Corporis, cumque quas sunt voluptatem, itaque ducimus eum nobis repellendus libero animi, dolorum saepe quae expedita adipisci eos? Autem, tenetur. Esse voluptatibus ab doloremque praesentium quo dolore, debitis molestiae harum.
                            Placeat iusto asperiores vel. Provident ex officia quidem at? Possimus, necessitatibus omnis cum autem deserunt rem maiores vel pariatur! Molestias asperiores accusamus quia qui maiores aut illum repudiandae optio tenetur?</p>
                        </div>
                    </div>
                </div>
                <footer class="card-footer">
                  <p class="card-footer-item">
                    <span>
                      View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
                    </span>
                  </p>
                  <p class="card-footer-item">
                    <span>
                      Share on <a href="#">Facebook</a>
                    </span>
                  </p>
                </footer>
              </div>
        </div>
    </section>


    <script src="app.js"></script>
</body>

</html>

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.columns {
    height: 60vh;
}

/* centering the title */
h1 {
    display: flex;
    justify-content: center;
}

/* vertical border beside the menu */
.column:first-child {
    border-right: 1px solid hsl(0, 0%, 96%);
}

/* inherit the body-size of the parent column */
#menu-column,
.menu,
.menu-list {
    width: inherit;
    height: inherit;
}

/* distribute menu items evenly */
.menu-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* individual menu items */
    #current,
    #hourly,
    #weekly,
    #maps {
    border: 2px solid green;