To make an element's height responsive, you can use a combination of the height and min-height CSS properties. The height property sets the fixed height of an element, while the min-height property sets the minimum height of an element, which ensures that the element will always be at least as tall as the specified minimum height, even on smaller screens.
For example, to make the #Border element responsive, you could use the following CSS:

#Border {
  height: auto; /* automatically adjust the height based on the content */
  min-height: 440px; /* set the minimum height to 440px */
}

You can also use media queries to specify different values for the height and min-height properties at different screen sizes. For example, you could use the following CSS to set the height of the #Border element to 440px on screens with a minimum width of 600px, and to automatically adjust the height based on the content on smaller screens:

#Border {
  height: auto; /* automatically adjust the height on small screens */
  min-height: 440px; /* set the minimum height to 440px on small screens */
}

@media (min-width: 600px) {
  #Border {
    height: 440px; /* set the height to 440px on large screens */
    min-height: auto; /* don't set a minimum height on large screens */
  }
}

Is this a solution you can use?

height: max-content;
height: min-content;
height: fit-content;

I use this for this kind of issue

Also try to provide a bit more code to work with. Can't fix what I don't see.

Add Negative margins #border{margin-bottom: -1rem;} It will bring it down

If these don't work let me know in the comments.