why aren't my html buttons aligning properly - html

Question

I cant get the 4 buttons to align in two rows. I've tried using flexbox yet I can only get them to align in two rows of three buttons at the top and one at the bottom. Ideally the buttons would be in the centre of the page, equally distant from each other.
HTML code
CSS code
Result

Answer 1

You can do it this way using flexbox note that you have to make two containers as a parent to hold your buttons.
.button_tense{
width:300px;
height: 300px;
}
.container{
display: flex;
flex-direction: row;
justify-content: space-around;
}
<div class="container">
<button class="button_tense"><a >present</a></button>
<button class="button_tense"><a >past</a></button>
</div>
<div class="container">
<button class="button_tense"><a >future</a></button>
<button class="button_tense"><a >imperfect</a></button>
</div>
And using grid with this
.button_tense{
width:300px;
height: 300px;
}
.container{
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
}
<div class="container">
<button class="button_tense"><a >present</a></button>
<button class="button_tense"><a >past</a></button>
<button class="button_tense"><a >future</a></button>
<button class="button_tense"><a >imperfect</a></button>
</div>
I would recommend for you to see this
Guide To Grid
and this
Guide To Flexbox
And welcome to stackoverflow :)

Answer 2

You have to add divs around each of the 2 buttons you want in the same row. Code is below.
button{
margin:5px;
}
<div>
<button class="button_tense"><a >present</a></button>
<button class="button_tense"><a >past</a></button>
</div>
<div>
<button class="button_tense"><a >future</a></button>
<button class="button_tense"><a >imperfect</a></button>
</div>