Leaflet Code Block Sizing Issue

Hi, I'm having difficulty coding CSS for my code block. It is a leaflet map, and I'm wanting it to be full bleed with no padding or margins on the block. I want the map to be 40-50vh, but want to play around with it. My code right now isn't really working.

Also, if anyone knows how I can make the leaflet map only scroll and work when clicked, let me know.

Thanks!

Web page link is https://themontevallolegacyproject.com/aaht. Password is AAHT.

The CSS currently looks like this:

      body {
        .center {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
 overflow-x: hidden;
 max-width: 100vw;
}}

     #map { height: 100vh; width: 100vw; }
 
        /** Full Width Block**/
#block-yui_3_17_2_1_1699131427037_24040 {
  padding: 2vw, 0hw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 40vh;
 
    .sqs-block-content{
    max-width:1250px;
    margin:0px;
  }}

Does anyone have any solutions? Thanks!

@josiedaisy I'm not 100% clear on what you want? It already looks like the map is full bleed and you've got the #map height set to 100vh in your custom CSS... but you mentioned you want to play around with that to 40 or 50vh?

If I change #map to 50vh, it does it, but there is space below, so I add 50vh to the height of the whole section to match, like this:

.fe-654818a5136a7869011d4bcd {
	height: 50vh;
}

Is that what you mean?