How to set the bottom margin of a modal

Question

I'm having a problem opening the modal. What I notice is that there is no lower margin of the modal, as you can see from the figure.

I have added JavaScript in case anyone cares.

So you can see where the modal starts from but not where it ends. How can I solve this problem? Can you kindly help me?

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            z-index: 999;
        }

<div id="myModal" class="modal">

                    <!-- Modal content -->
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <div class="mycontent">
                            <div>
                                <h1 class="title1" id="title1">
                            </div>

                            <div class="text-container">
                                <p class="txt1" id="txt1"> </p>
                            </div> <br>

                            <div class="img"> <img id="img" src onerror="this.onerror=null;" style="width:50%"> </div>
                            <br>

                            <div class="text-container">
                                <p class="txt2" id="txt2"> </p>
                            </div> <br>

                            <div class="video"> <iframe id="idframe" width="600" height="400"> </iframe> </div> <br>
                        </div>

                    </div>

                </div>