You want to use flex on .btn-group and make it take 100% of the width of the parent to stretch the div.

.btn-group {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: skyblue;
}

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D;
  /* Green background */
  border: 1px solid green;
  /* Green border */
  color: white;
  /* White text */
  padding: 10px 24px;
  /* Some padding */
  cursor: pointer;
  /* Pointer/hand icon */
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #3e8e41;
}

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>
</div>

You can add to your css:

.btn-group{
  display:flex;
  justify-content:center;
}

It will look like this

You can use Flexbox

.btn-group {
  display:flex; 
  flex-direction: row; 
  justify-content:center; 
}
.btn-group button {

  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D; /* Green background */
  border: 1px solid green; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}

  <div class="btn-group">
    <button type="button" class="button1">Faucet</button>
    <button type="button" class="button2">About Nano/Faucet</button>
    <button type="button" class="button3">Donate</button>  
</div>