I have a dropdown list and I cant get all of the elements within the container to be right next to eachother. Before opening the list and after there is a space that I want to make go away. I tried changing the margins but that did not help at all. I want to get rid of the whitespace before opening the list as well as the space that is left underneath the top text after opening one of the list elements.
CSS

a {
color: white;
text-decoration: none;/* Change this to the desired color */
transition: background-color 0.2s;
}

.dropdown-container {
  position: relative; /* create a positioning context for the list items */
  background-color: #333;
    color: white;
    text-decoration: none;
width: 150px;
text-align: center;
    transition: background-color 0.2s;
}

.dropdown-list {
  position: relative; /* position the list items absolutely */
 display: none; /* hide the list by default */
  top: 100px; /* hide the list by default */
  list-style-type: none; /* remove the bullet points for the list items */
  padding: 0; /* remove the padding for the list */
  left: 0; /* position the list items at the left edge of the list */
  transition: border 0.2s; /* add a transition effect for the border */
  background-color: #b0b0b0;
  color: black;
  text-decoration: none;
width: 150px;
    text-align: center;
    transition: background-color 0.2s;
}

.dropdown-list li:hover {
  background-color: #04AA6D;
    transition: background-color 0.2s;}/* change the background color of the list items 
to green when they are hovered over */
}
.dropdown-list li {
  color: black; /* set the color of the list items to black */
    text-align: center;
    transition: background-color 0.2s;
}

HTML

<div class="dropdown-container">
  <p><a href="#" onclick="toggleVisibility(this)">Global Models</a></p>
  <ul class="dropdown-list">
    <li><a href="#">GFS</a></li>
    <li><a href="#">CMC</a></li>
    <li><a href="#">ECMWF</a></li>
  </ul>
</div>
<div class="dropdown-container">
  <p><a href="#" onclick="toggleVisibility(this)">Mesoscale Models</a></p>
  <ul class="dropdown-list">
      <li><a href="#">NAM 12km</a></li>
    <li><a href="#">NAM 3km</a></li>
    <li><a href="#">HRRR</a></li>
  </ul>
</div>
<div class="dropdown-container">
  <p><a href="#" onclick="toggleVisibility(this)">Ensembles</a></p>
  <ul class="dropdown-list">
      <li><a href="#">GEFS</a></li>
    <li><a href="#">GEPS</a></li>
    <li><a href="#">Super Ensemble</a></li>
  </ul>
</div>

JS

function toggleVisibility(link) {
  // get the corresponding list
  var list = link.parentElement.nextElementSibling;

  // toggle the visibility of the list
  if (list.style.display === "none") {
    // hide all other lists
    var otherLists = document.querySelectorAll(".dropdown-list");
    for (var i = 0; i < otherLists.length; i++) {
      otherLists[i].style.display = "none";
    }

    // position the selected list below the previous list
    list.style.top = (link.parentElement.offsetTop + link.parentElement.offsetHeight) + 
"px";

    // show the selected list
    list.style.display = "block";
  } else {
    list.style.display = "none";
  }
}

Thanks