* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}
div#banner {
  position: relative;
  top: 0;
  left: 0;
  background-color: #b4ecb4;
  width: 100%;
  /* overflow-x: hidden; */
  display: block;
}

div#banner-content {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  border: 0px solid #000;
}

div#main-content {
  /* padding-top: 110px; */
  overflow-y: auto;
}
div#main-content center {
  height: 5000px;
}

<div id="banner">
  <div id="banner-content">
    <center>
      <h1>
        <big>
          My name
        </big>
      </h1>
      <small>
        <p>sub heading here</p>
      </small>
    </center>
  </div>
</div>
<div id="main-content">
  <center>
    <p>Main page content goes here</p>
  </center>
</div>

* {
  margin: 0;
  padding: 0;
}

div#banner {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #b4ecb4;
  width: 100%;
  overflow-x: hidden;
}

div#banner-content {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  border: 0px solid #000;
}

div#main-content {
  padding-top: 110px;
}

<div id="banner">
  <div id="banner-content">
    <center>
      <h1>
        <big>
          My name
        </big>
      </h1>
      <small>
        <p>sub heading here</p>
      </small>
    </center>
  </div>
</div>
<div id="main-content">
  <center>
    <p>Main page content goes here</p>
  </center>
</div>