How to make buttons next to each other? - html

Question

I have two buttons where I tried to put next to each others but for some reason is not working right. Can anyone check out my CSS code below to see if everything okay, if not I will be thankful if anyone can fix it?
Here is my code:
<a class="back" href="#">Back</a>
<a class="delete" ng-click="">Confirm</a>
CSS
a.back, .delete {
background: #00b7ff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
color: #fff;
display: block;
font-weight: bold;
margin: 0 0 20px;
padding: 14px 0;
text-align: center;
width: 200px;
}
a.back:hover {
background: #00b7ff;
text-decoration: none;
}

Answer 1

Change display: block; to display: inline-block;:
a.back,
.delete {
background: #00b7ff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
color: #fff;
display: inline-block;
font-weight: bold;
margin: 0 0 20px;
padding: 14px 0;
text-align: center;
width: 200px;
}
a.back:hover {
background: #00b7ff;
text-decoration: none;
}
<a class="back" href="#">Back</a>
<a class="delete" ng-click="">Confirm</a>

Answer 2

Change display: block;
to display: flex;

Answer 3

you can use display flex to organise your buttons for more information go to this link here

Answer 4

You may encounter mysterious white space between buttons if you use inline blocks as the accepted answer suggests. It is caused by natural white space between inline elements (imagine the white spaces between letters). To remove it, the simplest way is to put the ending tag and beginning together, such as:
<a class="back" href="#">Back
</a><a class="delete" ng-click="">Confirm</a>
There are several other methods, but I found this one the easiest. To learn more, check this good article.