screen split into 2 parts in CSS

Keywords´╝Ü javascript css

Question: 

I try to display buttons and checkboxes but I don't understand why all my elements are on the left part of the screen.

When displayed it is as if my screen was split in 2 with blank div on the right but there is nothing. I have nothing defining to center in left neither.

Do you know how to use the entire space like:

buttonLeft . buttonRight

      
.wrapperUA{
  display: grid;
  grid-template-columns: 40vh 20vh 40vh;
  grid-template-rows: 5vh 10vh 5vh 3vh 15vh 10vh 3vh 5vh 15vh 10vh 19vh;
  grid-gap: 5px;
  grid-template-areas:
  ". . ."
  "UA1Fr . UA1En"
  ". . ."
  "UA21 UA22 UA23"
  ". . ."
  "UA3Fr . UA3En"
  ". . ."
  "UA41 UA42 UA43"
  ". . ."
  ". UA5 ."
  ". . .";
  text-align: center;
  align-items: center;
  vertical-align: middle;  
  align-content: center;
}

.UA1Fr{
  grid-area: UA1Fr;
}

.UA1En{
  grid-area: UA1En;
}

.UA21{
  grid-area: UA21;
}

.UA22{
  grid-area: UA22;
}

.UA23{
  grid-area: UA23;
}

.UA3Fr{
  grid-area: UA3Fr;
}

.UA3En{
  grid-area: UA3En;
}

.UA41{
  grid-area: UA41;
}

.UA42{
  grid-area: UA42;
}

.UA43{
  grid-area: UA43;
}

.UA5{
  grid-area: UA5;
  text-align: center;
}

.UA1Fr, .UA1En, .UA3Fr, .UA3En, .UA5{
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 50px;
    border: 2px solid green;
    color: green;
    background-color: transparent;
    font-weight: bold
}
<div class="wrapperUA" >
          <Button 
                class="UA1Fr"
                variant="primary">
                Text
          </Button>
          <Button 
                class="UA1En"
                variant="primary">
                text
          </Button>
          <h5 class="UA21">text to display</h5>
          <div class="UA22">
            <input type="checkbox"/>
          </div>
          <h5 class="UA23">text</h5>
          <Button 
                class="UA3Fr"
                variant="primary">
                test to display
          </Button>
          <Button 
                class="UA3En"
                variant="primary"
                onClick={}>
                text
          </Button>
            <h5 class="UA41">text</h5>
            <div class="UA42">
              <input type="checkbox"/>
            </div>
            <h5 class="UA43">text</h5>
          <Button 
              class="UA5"
              variant="primary">
              Next
          </Button>
      </div>

Answers: