Fixing the whitespace of a css box

I was trying to fix a popup box that appears when an item is clicked (this is for a demo restaurant site), which has inner content set to 640px. However, the box has a lot of whitespace around it that I cannot seem to figure out how to remove.

Here's the code to create the popup box:

.popup {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  /*overflow-x: hidden;*/
  transition: 0.3s;
}

.popup-content {
  position: relative;
  top: 20%;
  width: 100%;
  padding-right: 36px;
  margin-top: 2px;
  text-align: center;
}

.popup a {
  padding: 0px;  
  max-width: 700px;
  text-decoration: none;
  font-size: 36px;
  color: #000000;
  display: block;
}

I've been poking around this for a bit but cannot figure out where the sizing of the actual box comes in.

It seems that the issue might be with the top property of the .popup-content class. It's set to top: 20%;, which means that popup content will be positioned 20% from the top of its container. This might cause the whitespace you're experiencing.

Try this approach

• Change the top property in the .popup-content class to top: 0;:

.popup-content {
  position: relative;
  top: 0;
  width: 100%;
  padding-right: 36px;
  margin-top: 2px;
  text-align: center;
}

• use padding property for spacing inside the popup box:

.popup-content {
  /* Other properties */
  padding: 20px;  /* or the value you need*/
}