button heights not matching - html

Question

I am making a website for my college course and I am having problems getting the button heights in my slide show to match up. I was wondering if anyone could give me a clue as to how to get them both to be at the same height?
This is my css for the slide show:
/=== SLIDESHOW SECTION ===/
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
position: relative;
}
#container > img
{
width: 100%;
height: 100%;
position: absolute;
}
#container > .btn
{
position: absolute;
width: 50px;
height: 50px;
border: none;
border-radius: 25px;
top: 350px;
background: #000000;
color: #ffffff;
font-size: 20px;
}
#container>#btn1:hover
{
box-shadow: 10px 0px 20px 0px #343d46 ;
}
#container>#btn2:hover
{
box-shadow: -10px 0px 20px 0px #343d46;
}
#container>#btn2
{
position: relative;
float: right;
}
picture of the problem

Answer 1

change your
#container>#btn2
{
position: relative;
float: right;
}
to
#container>#btn2
{
right:0;
}

Answer 2

Try adding this before #container>#btn2:
#container>#btn1
{
position: relative;
float: left;
}

Answer 3

Absolute positioning generally shouldn't be applied to classes (multiple elements).
I would remove the absolute positioning on your .btns and use flexbox on your container, like so:-
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
display: flex; /* adds flexbox to container */
align-items: center; /* vertically aligns everything in container */
justify-content: space-between; /* spaces the buttons as far away `enter code here`from each other as possible */
}
You can then add padding to your container for finer adjustments of your buttons horizontal distance from the container edge.