Resizing Embed Code Box - Unsure if that is problem

Hello,

I followed a guide from will-myers.com to add tabs to my website. When I start adding my embed box, its one row thin, which is what I want. After I add in the html, it forces the embedded code box to be a size that I can't shrink. This is a problem because it adds a large gap when viewing on mobile. It also does some weird things on desktop but I primarily need this for desktop. 

How can I shrink the embed code box or how can I write this so it doesn't add this weird gap? Thanks!

<div class="tabs-container">
  <button class="tab-btn" id="tab-1" onclick="tabOneClick()">
    Sponsors
  </button>
  <button class="tab-btn" id="tab-2" onclick="tabTwoClick()">
    Events
  </button>
  <button class="tab-btn" id="tab-3" onclick="tabThreeClick()">
    Map
  </button>
</div>

<!--Be sure jQuery is loaded on your site.-->
<script>
  function tabOneClick() {
    $('button.tab-btn:nth-of-type(1)').addClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");

    $('[data-section-id="6494a509aa00b76380ebb53f"]').addClass("tab-section-show");
    $('[data-section-id="6494a519f5dabd3a76b5e0be"]').removeClass("tab-section-show");
    $('[data-section-id="6494ab3656ab525f2e10a38a"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }


  function tabTwoClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').addClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");

    $('[data-section-id="6494a509aa00b76380ebb53f"]').removeClass("tab-section-show");
    $('[data-section-id="6494a519f5dabd3a76b5e0be"]').addClass("tab-section-show");
    $('[data-section-id="6494ab3656ab525f2e10a38a"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }


  function tabThreeClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').addClass("active");

    $('[data-section-id="6494a509aa00b76380ebb53f"]').removeClass("tab-section-show");
    $('[data-section-id="6494a519f5dabd3a76b5e0be"]').removeClass("tab-section-show");
    $('[data-section-id="6494ab3656ab525f2e10a38a"]').addClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
  }


  $(function() {
    $('[data-section-id="6494a509aa00b76380ebb53f"]').addClass("tab-section-hide");
    $('[data-section-id="6494a519f5dabd3a76b5e0be"]').addClass("tab-section-hide");
    $('[data-section-id="6494ab3656ab525f2e10a38a"]').addClass("tab-section-hide");
    tabOneClick();
  });
</script>

.tabs-container{
  transform:translateY(100%);
  width:100% !important;
  text-align:center;
  border-bottom: 1px solid #999;
  overflow: auto;
  overflow-x:auto;
  white-space: nowrap;
  z-index:99;
  font: black;
}
.tab-btn{
  max-width:150px;
  display: inline-block;
  border-radius:3px 3px 0 0;
  border:1px solid #999;
  padding: 12px 18px;
  font-size:1.2em;
  background:white;
  margin-bottom:none !important;
  border:none !important;
  &:not(:first-of-type){
  margin-left:10px;
  }
}
.tab-btn.active{
  background:lightblue;
}

section.tab-section-hide{
  display:none !important;
}
section.tab-section-show{
  display:flex !important;
}

Found this answer! Works for me 🙂