<div class='grid-container'>
  <div class='nav' id='header'>
     <p class='header-item'>Username</p>
     <p class='header-item'>$1,000</p>
     <p class='header-item'>Logout</p>
  </div>
  <div id='blackjack-table'>Cards Dealt Here</div>
  
  <div class='button' id='hit-button'>Hit</div>
  
<!--    <div class='button' id='button1'>Double Down</div> 
  <div class='button' id='button2'>Split</div> -->

  <div class='button' id='stay-button'>Stay</div>
  <div class='nav' id='footer'>Created by Billy Witherspoon and Kevin McMinn</div>
</div>
.grid-container {
  display: grid; 
  grid-template-rows: 10% 1fr 1fr 1fr 1fr 10%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 2vw;
  background-color: #fff;
  color: #444;
/*   padding: 1vw; */
/*   border: solid; */
}

.nav {
  background-color: #444;
  color: #fff;
  border-radius: .5vw;
  padding: 1vw;
  font-size: 1vw;
  display: flex;
  align-items: center
}

#blackjack-table {
  background-color: #0F7515;
  color: #fff;
  border-radius: 6vw;
  padding: 1vw;
  font-size: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-row: 2 / 6;
  grid-column: 1 / 4;
}

#header {
    grid-row: 1;    
    grid-column: 1 / 6;
    flex-direction: row;
    justify-content: space-around;
}

#hit-button {
    grid-row: 2 / 4;
    grid-column: 4 / 6;
}

#stay-button {
    grid-row: 4 / 6;
    grid-column: 4 /6;
}

#footer {
    grid-row: 6;
    grid-column: 2 / 5;
    display: flex;
    justify-content: center;
    font-size: .9vw;
}

body {
  margin-left: 30vw;
  margin-right: 30vw;
  margin-top: 5vw;
}

.button {
  background-color: #8B0000;
  color: #fff;
  border-radius: .5vw;
  padding: 1vw;
  font-size: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-item {
}

@media only screen and (max-width: 600px) {
   #hit-button {
    grid-row: 6 / 7;
    grid-column: 1 / 3;
}

#stay-button {
    grid-row: 6 / 7;
    grid-column: 3 / 5;
} 
  
  
}

@media only screen and (min-width: 601px) {
  #hit-button {
    grid-row: 2 / 4;
    grid-column: 4 / 6;
}

#stay-button {
    grid-row: 4 / 6;
    grid-column: 4 /6;
}
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.