Need Help with Buttons HTML/CSS/Javascript

I’m attempting to make a nice navigation button banner for my site. I need them centered in the page and the scroll bar at the bottom gone. I’ve been working on this for over a week. These scripts are pretty much gibberish to me and I’m lucky to have gotten as far with it as I did.
Also, is this script making server calls?

</html><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}
.container {
  display: flex;
  flex-flow: row nowrap;
  center-content: space-between;
  width: 100%;
  padding: 30px
}
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    left:0;
    background-color: rgba(0,0,0, 0.9);
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    transition: .5s;
}
.overlay a, .overlay2 a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: .3s;
}
.overlay a:hover, .overlay a:focus, .overlay2 a:hover{
    color: #f1f1f1;
}
.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center; 
    margin-top: 30px; 
}
.closebtnOverlay {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px !important;
}
.overlay2 {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 9;
    top: 0;
    left:0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: auto;
    overflow: hidden;
    text-align: center;
    transition: .5s;
}

@media screen and (max-height: 450px) {
    ..overlay2 a {font-size: 20px}
    .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
    }
}
</style>
</head>
<div class="container">
<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    <div class="overlay-content">      
      <a href="javascript:void(0)">About</a>
      <a href="javascript:void(0)">Services</a>
      <a href="javascript:void(0)">Clients</a>
      <a href="javascript:void(0)">Contact</a>
    </div>
  </div>
  <div id="myNav2" class="overlay2" style="height: 0%;">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    <div class="overlay-content">      
      <a href="javascript:void(0)">About</a>
      <a href="javascript:void(0)">Services</a>
      <a href="javascript:void(0)">Clients</a>
      <a href="javascript:void(0)">Contact</a>
    </div>
  </div>
<button class="ws-btn w3-padding-large w3-dark-grey w3-mobile" onclick="openNav()">Arizona</button>
<p class="w3-hide-large w3-hide-medium"></p>
<button class="ws-btn w3-padding-large w3-dark-grey w3-mobile" onclick="openNav2()">Florida</button>
    <script>
  function openNav() {
    document.getElementById("myNav").style.width = "100%";
  }
  function closeNav() {
    document.getElementById("myNav").style.width = "0%";
  }
  
  function openNav2() {
    document.getElementById("myNav2").style.height = "100%";
  }
  function closeNav2() {
    document.getElementById("myNav2").style.height = "0%";
  }
 
</script>
</div>
</body>
</html>

There is no such property as center-content. I suggest researching the options available for justify-content and you will find what you are looking for as far as centering the top two buttons.

As far as getting rid of the scrollbar at the bottom, you will need to adjust the padding of your container class so that only the top and bottom has any padding.

container

I know it’s messed up. I have no idea what I’m doing. Thanks for the pointers. I’ll go back and try to figure it out with what you gave me.

I went back to the drawing board with what you gave me and was able to get things lined up the way I wanted, made the CSS more efficient, + a few more things I was able to figure out.
THEN I embedded the code into my Google Sites page. If I make it so the buttons look good in the layout the curtain menu won’t display correctly.
Is there a way to make the curtain menu “jump up” and cover the entire screen instead of just the frame it’s embedded in?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}
.container {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  padding top: 30px;
  padding bottom: 30px
}
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: auto;
    overflow: hidden;
    text-align: center;
    transition: .5s;
}
.overlay a, {
    text-decoration: none;
    color: #3333;
    display: block;
    transition: .5s;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay-content {
  	display: flex;
  	flex-direction: column;
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center; 
    margin-top: 30px; 
}
.closebtnOverlay {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px !important;
}
.button {
  background-color: #FF8C00;
  border: 2px solid #4CAF50;
  border-radius: 12px;
  color: white;
  width: 120px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
    }
}
</style>
</head>
<body>
<div class="container">
	<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    	<div class="overlay-content">      
      	<a href="javascript:void(0)">About</a>
      	<a href="javascript:void(0)">Services</a>
      	<a href="javascript:void(0)">Clients</a>
      	<a href="javascript:void(0)">Contact</a>
    	</div>
  	</div>
  	<div id="myNav2" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    	<div class="overlay-content">      
      	<a href="javascript:void(0)">About</a>
      	<a href="javascript:void(0)">Services</a>
      	<a href="javascript:void(0)">Clients</a>
      	<a href="javascript:void(0)">Contact</a>
    	</div>
  	</div>
  	<div id="myNav3" class="overlay">
  	<a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav3()">×</a>
  		<div class="overlay-content">
    	<a href="javascript:void(0)">Austin</a>
    	<a href="javascript:void(0)">Dallas</a>
    	<a href="javascript:void(0)">Houston</a>
   	 	<a href="javascript:void(0)">San Antonio</a>
  		</div>
	</div>

<button class="button" onclick="openNav()">Arizona</button>
<button class="button" onclick="openNav2()">Florida</button>
<button class="button" onclick="openNav3()">Texas</button>
<script>

function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}

function openNav2() {
document.getElementById("myNav2").style.height = "100%";
}
function closeNav2() {
document.getElementById("myNav2").style.height = "0%";
}
  
function openNav3() {
    document.getElementById("myNav3").style.height = "100%";
}
function closeNav3() {
document.getElementById("myNav3").style.height = "0%";
}
</script>
</div>
</body>
</html>

Hello? Some help, please.

I went back to the drawing board with what I learned from my previous post and was able to get things lined up the way I wanted, made the CSS more efficient, + a few more things I was able to figure out.
THEN I embedded the code into my Google Sites page. If I make it so the buttons look good in the layout the curtain menu won’t display correctly.
Is there a way to make the curtain menu “jump up” and cover the entire screen instead of just the frame it’s embedded in?
Latest version. I’m trying.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}
.container {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  padding top: 30px
}
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: auto;
    overflow: scroll;
    text-align: center;
    transition: .5s;
}
.overlay a {
  text-decoration: none;
  font-size: 24px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay-content {
  	display: flex;
  	flex-direction: column;
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center; 
}
.closebtnOverlay {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 50px !important;
}
.button {
  background-color: #FF8C00;
  border: 2px solid #338C9A;
  border-radius: 12px;
  color: white;
  width: 120px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
}
.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
    }
}
</style>
</head>
<body>
<div class="container">
	<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    	<div class="overlay-content">      
      	<a href="javascript:void(0)">Phoenix</a>
      	<a href="javascript:void(0)">Prescott</a>
      	<a href="javascript:void(0)">Scottsdale</a>
      	<a href="javascript:void(0)">Tucson</a>
    	</div>
  	</div>
  	<div id="myNav2" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    	<div class="overlay-content">      
      	<a href="javascript:void(0)">Cape Coral</a>
      	<a href="javascript:void(0)">Jacksonville</a>
      	<a href="javascript:void(0)">Lakeland</a>
      	<a href="javascript:void(0)">Miami</a>
        <a href="javascript:void(0)">Ocala</a>
      	<a href="javascript:void(0)">Orlando</a>
      	<a href="javascript:void(0)">Palm Beach</a>
      	<a href="javascript:void(0)">Pensacola</a>
        <a href="javascript:void(0)">Port Charlotte</a>
      	<a href="javascript:void(0)">Sarasota</a>
      	<a href="javascript:void(0)">St. Augustine</a>
      	<a href="javascript:void(0)">St. Petersburg</a>
      	<a href="javascript:void(0)">Tallahasse</a>
      	<a href="javascript:void(0)">Tampa</a>
    	</div>
  	</div>
  	<div id="myNav3" class="overlay">
  	<a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav3()">×</a>
  		<div class="overlay-content">
    	<a href="javascript:void(0)">Austin</a>
    	<a href="javascript:void(0)">Dallas</a>
    	<a href="javascript:void(0)">Houston</a>
   	 	<a href="javascript:void(0)">San Antonio</a>
  		</div>
	</div>
<button class="button" onclick="openNav()">Arizona</button>
<button class="button" onclick="openNav2()">Florida</button>
<button class="button" onclick="openNav3()">Texas</button>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}

function openNav2() {
document.getElementById("myNav2").style.height = "100%";
}
function closeNav2() {
document.getElementById("myNav2").style.height = "0%";
}
  
function openNav3() {
    document.getElementById("myNav3").style.height = "100%";
}
function closeNav3() {
document.getElementById("myNav3").style.height = "0%";
}
</script>
</div>
</body>
</html>