I have been playing around with css for a bit trying many different methods with no success. I came really close with the code below, except the hover doesn't work anymore. Guessing it has overlapping elements? So, I would like 2 buttons next to each other but also center of screen regardless of screen size - and they also need to be hoverable. Here is the closest I could get...

```css
.standardButton{
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    border-radius: 5px;
    background: #4CAF50;
    margin-top: -5px;
    width: 90%;
    height: 50px;
    border: 0;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}
.standardButton:hover,.standardButton:active,.standardButton:focus {
    background: #43A047;
}
.buttonBackground2{
    height: 15px;
    width: 110px;
    border-radius: 5px;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding-bottom: 35px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.positionLogoutButton{
    display: inline-block;
    margin: 10px;
}
.positionAddDeviceButton{
    display: inline-block;
    margin: 10px;
}
.centerEverything{
    display: flex;
    justify-content: center;
}
```

```html
<div class="centerEverything">
  <div class="positionLogoutButton">
    <div class="buttonBackground2">
      <button class="standardButton" onClick={handleLogout}>Logout</button>
    </div>
  </div>
  <div class="positionAddDeviceButton">
    <div class="buttonBackground2">
      <button class="standardButton" onClick={handleAddDevice}>Add Device</button>
    </div>
  </div>
</div>
```