Align two buttons at the bottom of the page - css

Question

I have to align two buttons at the bottom of the page, but I can not do it. One is the button "gallery" and the other is icon linkedin.
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
<div class="container">
<div class="carousel-caption">
<h1>TITLE</h1>
<p class="lead">Description</p>
</div>
</div>
<div class="pull-right">
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
</div>
</div>
</div>
</div>
<div class="pull-left">
<div class="social-caption">
<button class="btn btn-large btn-linkedin">
<i class="icon-linkedin"></i><span><a style="color:white" vhref="http://www.linkedin.com/"> | Linkedin</span></button>
</div>
css for the two buttons:
.social-caption {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
bottom: 45px;
left: 5px;
}
.gallery-button {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
bottom: 45px;
right: 5px;
}
The two buttons do not appear aligned. This problem is seen especially with mobile devices
Solutions? Thanks

Answer 1

You could do something like THIS, for example. It uses position:absolute to locate the buttons at the bottom of the page's content (bottom:0) - or relative to their parents positioning (in this case the body. The alternative would be to use position:fixed which would ensure the buttons appear at the bottom of the viewport at all times.
See the difference between absolute positioning and fixed positioning.
HTML
<button>Button 1</button>
<button>Button 2</button>
CSS
body{
position:relative;
}
button{
position:absolute;
bottom:0;
}
button:last-child{
left:100px;
}

Answer 2

May be you could use this:
<input type='button' style='position:fixed; top:94%; left:82%; width:100px' value='
this means the button will appear at the right corner in the bottom of your page.

Answer 3

//hope so this code helps you.
.center{
justify-content: center;
display:flex;
align-item: center
}
.right{
justify-content: flex-end;
display:flex;
}
//for center align
<div class="center">
<button>First Button</button>
<button>Second Button</button>
</div>
//for right align
<div class="right">
<button>First Button</button>
<button>Second Button</button>
</div>