Q:

How to place the button under the flag and make the page responsive

I have been having difficulty with keeping the button below the flag and in the same position regardless of the screen size.  I am also having an issue with making it mobile responsive. 
I have been trying using different CSS positions and adding  in different places to place the button under the flag.  As for the responsiveness, I have tried adding a media query and adding max-width.  Neither has worked. 
  box-sizing: boarder-box;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

.container {
  display: flex;
  width: 100vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flag-container {
  display: absolute;
  width: 80vw;
  height: 80vh;
}

.american-flag {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 260px;
  width: 450px;
  background-color: #B31C31;
}

.american-flag:after {
  content: '';
  top: 20px;
  height: 20px;
  width: 450px;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 40px 0 0 #fff,
              0 80px 0 0 #fff,
              0 120px 0 0 #fff,
              0 160px 0 0 #fff,
              0 200px 0 0 #fff;
}

.american-flag:before {
  content: '★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \ ★ ★ ★ ★ ★ ★';
  font-size: 19px;
  padding: 10px 0 0 8px;
  letter-spacing: 3px;
  line-height: 13px;
  color: #fff;
  position: absolute;
  background-color: #39386E;
  width: 180px;
  height: 130px;
  z-index: 1;
}

.btn-container {
  position: relative;
  text-align: center;
  margin-top: 30px;
}

.btn {
  height: 40px;
  width: 230px;
  background: #fff;
  border: #B31C31 solid 2px;
  border-radius: 10px;
  color: #39386E;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.btn:hover {opacity: 0.6}

/* Fireworks */
@-webkit-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0px;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

@-moz-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

#stage {
  position: relative;
  height: 100vh;
  background-color: #000028;
}

.launcher {
  position: absolute;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  background: #fff;
  border-bottom: 3px solid yellow;
}

.launcher div {
  position: absolute;
  opacity: 0;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 4px;
  border-right: 4px solid yellow;
  border-radius: 2px;
  -webkit-animation-name: explosion;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: explosion;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}```

The expected outcome was to have the button under the flag and the whole site to be mobile responsive. 

    ```<div id="stage">
        <div class="container">
         <div class="flag-container">
          <div class="american-flag"></div>
          <div>
            <div class="btn-container">
            <input type="button" class="btn" id="btn" value="Happy 
            Birthday, America!!!"   onclick="play(), btnHide()">
            <audio id="audio" 
 src="http://lcweb2.loc.gov/natlib/ihas/service/ssbanner/100010509/100010509.mp3" ></audio>
        </div>
      </div>
    </div>```

A:

Try this way

.container {
  display: flex;
  width: 100vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.american-flag {
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 260px;
  width: 450px;
  background-color: #B31C31;
}

.american-flag:after {
  content: '';
  top: 20px;
  height: 20px;
  width: 450px;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 40px 0 0 #fff, 0 80px 0 0 #fff, 0 120px 0 0 #fff, 0 160px 0 0 #fff, 0 200px 0 0 #fff;
}

.american-flag:before {
  content: '★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ ★ \00a0\ ★ ★ ★ ★ ★ \ ★ ★ ★ ★ ★ ★';
  font-size: 19px;
  padding: 10px 0 0 8px;
  letter-spacing: 3px;
  line-height: 13px;
  color: #fff;
  position: absolute;
  background-color: #39386E;
  width: 180px;
  height: 130px;
  z-index: 1;
}

.btn-container {
  position: relative;
  text-align: center;
  margin-top: 30px;
}

.btn {
  height: 40px;
  width: 230px;
  background: #fff;
  border: #B31C31 solid 2px;
  border-radius: 10px;
  color: #39386E;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.6
}


/* Fireworks */

@-webkit-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0px;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

@-moz-keyframes explosion {
  from {
    width: 0;
    opacity: 0;
  }
  33% {
    width: 0;
    opacity: 0;
  }
  34% {
    width: 10px;
    opacity: 1.0;
  }
  40% {
    width: 80px;
    opacity: 1.0;
  }
  to {
    width: 90px;
    opacity: 0;
  }
}

#stage {
  position: relative;
  background-color: #000028;
}

.launcher {
  position: absolute;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  background: #fff;
  border-bottom: 3px solid yellow;
}

.launcher div {
  position: absolute;
  opacity: 0;
  left: 3px;
  top: 3px;
  width: 10px;
  height: 4px;
  border-right: 4px solid yellow;
  border-radius: 2px;
  -webkit-animation-name: explosion;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: explosion;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}
<div id="stage">
  <div class="container">
    <div class="flag-container">
      <div class="american-flag"></div>
      <div>
        <div class="btn-container">
          <input type="button" class="btn" id="btn" value="Happy Birthday, America!!!"  onclick="play(), btnHide()">
          <audio id="audio" src="http://lcweb2.loc.gov/natlib/ihas/service/ssbanner/100010509/100010509.mp3"></audio>
        </div>
      </div>
    </div>

This is a relatively easier layout that does not require position:absolute; 

