问嵌入式Twitter小部件溢出页脚和其他元素

EN

    <main>    
    <h1>ESTADO DE RED DE SUBTE</h1>
    <div class="subte-div">
      <div class="tabla">
        <iframe class="frame" height="600" src="https://aplicacioneswp.metrovias.com.ar/estadolineas/desktop.html"></iframe>
      </div>
      <div class="tweets">
        <a class="twitter-timeline" data-lang="es" data-width="280" data-height="500" href="https://twitter.com/basubte?ref_src=twsrc%5Etfw">Tweets by basubte</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
      </div>
    </div>  
  <footer>
    <p class="footer-text">transporte.capital, 2022</p>
  </footer>
  </main>

    .subte-div {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  height: 600px;
}

.frame {
  border-width: 0px;
  border-style: solid;
  width: 350px;
  padding: 0;
  margin-right: 50px;
  display: flex;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background-color: rgb(208, 206, 206);
}

.footer-text {
  font-size: 10px;
  font-weight: 700;
  padding: 0;
  color: rgb(57, 57, 57);
}

@media (max-width: 700px) {

  header {
    flex-direction: column;
    padding: 0;
  }

  .menu {
    display: flex;
    margin: 0;
    justify-content: space-around;
    width: 90%;
    gap: 5%;
    padding-bottom: 1em;
  }

  .subte-div{
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  
  .tabla, .tweets {
    margin: 0px;
    padding: 0px;
  }

  .footer-text {
    display: none;
  }

  .h1 {
    margin-bottom: 0px;
    padding-bottom: 0;
  }

}