The shadow crawls out of the block. How to fix box-shadow?

Question

css

There is an object - an inscription h1 - it is a child element of .top_wrapper.
More specifically:
top_wrapper
top_descr
top_centered
top_text
h1
It has a box-shadow with options: rgba(0,0,0,.3) 0 0 0 1000px

.top_wrapper
  display: table
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  z-index: 10
  .top_descr
    display: table-row
    .top_centered
      display: table-cell
      text-align: center
      vertical-align: middle
  .top_text
    display: inline-block
    p
      margin: 0
      text-transform: uppercase
      +animation-delay(1.5s)
    h1
      display: inline-block
      padding: 10px 35px
      color: #fff
      border: 8px solid #fff
      text-transform: uppercase
      font-weight: bold
      font-size: 2.8em
      background-color: rgba(0,0,0,.4)
      box-shadow: rgba(0,0,0,.3) 0 0 0 1000px         //параметр тени
      margin-left: 20px
      margin-right: 20px
      +animation-delay(1s)

So this shadow always goes beyond the boundaries of the header. And most importantly, a simple change of parameters: the problem is not solved. In chrome everything will be ok. And in firefox, the shadow will still fit on the bottom section. In adaptive layout the same garbage. google ( with box-shadow parameters: rgba(0,0,0,.3) 0 -150 0 500px) firefox with the same parameters adaptive layout Another bonus is this problem: The page moves out. Alternatively, it could be because of the same shadow, or because of the animation on the page. krch here js entirely:
box-shadow: rgba(0,0,0,.3) 0 -150 0 500px

$(document).ready(function() {

  $("#portfolio_grid").mixItUp();

  $(".s_portfolio li").click(function() {
    $(".s_portfolio li").removeClass("active");
    $(this).addClass("active");
  });

  $(".popup").magnificPopup({type:"image"});
  $(".popup_content").magnificPopup({type: "inline", midClick: true});

  $(".animation_1").animated("flipInY", "flipOutY");
  $(".animation_2").animated("fadeInLeft", "fadeOutLeft");
  $(".animation_3").animated("fadeInRight", "fadeOutRight");

  $(".top_text h1").animated("fadeInDown", "fadeOutUp");
  $(".top_text p, .section_header").animated("fadeInUp", "fadeOutDown");

  $(".left .resume_item").animated("fadeInLeft", "fadeOutLeft");
  $(".right .resume_item").animated("fadeInRight", "fadeOutRight");

  function heightDetect() {
    $(".main_head").css("height", $(window).height());
  };
  heightDetect()
  $(window).resize(function() {
    heightDetect()
  });
  
});

$(".toggle_mnu").click(function() {
  $(".sandwich").toggleClass("active");
});

$(".top_mnu ul a").click(function() {
  $(".top_mnu").fadeOut(600);
  $(".sandwich").toggleClass("active");
}).append("<span>");

$(".toggle_mnu").click(function() {
  if ($(".top_mnu").is(":visible")) {
    $(".top_text").removeClass("h_opacify");
    $(".top_mnu").fadeOut(600);
    $(".top_mnu li a").removeClass("fadeInUp animated");
  } else {
    $(".top_text").addClass("h_opacify");
    $(".top_mnu").fadeIn(600);
    $(".top_mnu li a").addClass("fadeInUp animated");
  };
});

$(".portfolio_item").each(function(i) {
  $(this).find("a").attr("href", "#work_" + i);
  $(this).find(".port_descr").attr("id", "work_" + i);
});

$("input,select,textarea").jqBootstrapValidation(); 

$(".top_mnu ul a").mPageScroll2id();

$(window).load(function() { 
  $(".loader_inner").fadeOut(); 
  $(".loader").delay(400).fadeOut("slow"); 
});

Here is the header HTML:

<header class="main_head main_color_bg" data-parallax="scroll" data-image-src="img/bg.jpg" data-z-index="1" data-position="top center">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="logo_container">
            <svg>тут был логотип</svg>
                </div>

        <button class="toggle_mnu">
          <span class="sandwich">
            <span class='sw-topper'></span>
            <span class='sw-bottom'></span>
            <span class='sw-footer'></span>
          </span>
        </button>
        <nav class="top_mnu">
          <ul>
            <li><a href="#about">Обо мне</a></li>
            <li><a href="#resume">Резюме</a></li>
            <li><a href="#portfolio">Портфолио</a></li>
            <li><a href="#contacts">Контакты</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
  <div class="top_wrapper">
    <div class="top_descr">
      <div class="top_centered">
        <div class="top_text">
          <h1>Константин Дмитров</h1>
          <p>Web-дизайнер, Front-End рарзаботчик</p>
        </div>
      </div>
    </div>
  </div>
</header>

Answer 1

1. fill in the code to see it live
2. I'm certainly not an expert, but such a shadow rgba(0,0,0,.3) 0 0 0 1000px will slow down the site a lot, load on the percentage
3. why such a huge shadow?

Answer 2

Alternatively, you can try overflow hidden
without overflow hidden

with overflow hidden