Rearrange buttons in a horizontal line - html

Question

I am designing a website, and have these menu buttons which will act as like a banner near the top of the page for navigation.
However, at the moment on the website the buttons are in a vertical line. How do i make them horizontal?
here is the button:
button1 {
display: block;
width: 175px;
box-sizing: border-box;
margin: 0.5rem auto;
padding: 0.75rem;
font-size: 1.5rem;
text-align: center;
color: white;
border: solid #ffffff 2px;
background: #8ec8ea;
border-radius: 0.5rem;
outline: none;
cursor: pointer;
}
and my html where ive made the buttons..
<t><button1>Home</button1></t>
<t><button1>Facilities</button1></t>
<t><button1>Facilities</button1></t>
<t><button1>Donate</button1></t>
<t><button1>News</button1></t>
<t><button1>Testimonials</button1></t>
<t><button1>Contact us</button1></t>
Also, if there is better practice of doing this - let me know!

Answer 1

Just change your display: block; to display: inline-block; in your button1 css
JSFiddle: http://jsfiddle.net/ghorg12110/8wzgddhg/1/
And if you want a HTML W3C valid :
HTML:
<div class="t">
<a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/" class="button1">
Home
</a>
</div>
<div class="t">
<a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Facilities.html" class="button1">
Facilities
</a>
</div>
<div class="t">
<a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Facilities.html" class="button1">
Facilities
</a>
</div>
<div class="t">
<a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Donate.html" class="button1">
Donate
</a>
</div>
<div class="t">
<a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/News.html" class="button1">
News
</a>
</div>
<div class="t">
<a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Testimonials.html" class="button1">
Testimonials
</a>
</div>
<div class="t">
<a href="http://tv005382.webs.sse.reading.ac.uk/Lithium/3.-Lithium/app/Contact.html" class="button1">
Contact us
</a>
</div>
CSS:
.button1 {
width: 175px;
box-sizing: border-box;
margin: 0.5rem auto;
padding: 0.75rem;
font-size: 1.5rem;
text-align: center;
color: white;
border: solid #ffffff 2px;
background: #8ec8ea;
border-radius: 0.5rem;
outline: none;
cursor: pointer;
display: inline-block;
text-decoration: none;
}
.t {
display: inline-block;
}
JSFiddle : http://jsfiddle.net/ghorg12110/8wzgddhg/2/