My buttons are refusing to line up horizontally for some unknown reason. I can't figure out what the issue is. They are all set to display as inline-block elements. The first image shows a website with the correctly aligned buttons, while the second one displays a website without the buttons so you can see the problem. Thank you :).
This is my HTML:
<center>
<div id="menu">
<form>
<input class="MyButton" type="button" value="About us" onclick="F:\practice website's\About us.html">
</form>
<form>
<input class="MyButton" type="button" value="Events" onclick="F:\practice website's\About us.html">
</form>
<form>
<input class="MyButton" type="button" value="Sign up" onclick="F:\practice website's\About us.html">
</form>
<form>
<input class="MyButton" type="button" value="Volunteer" onclick="F:\practice website's\About us.html">
</form>
<form>
<input class="MyButton" type="button" value="Contact" onclick="F:\practice website's\About us.html">
</form>
</div>
This is my CSS:
a:link{
text-decoration: none;
color: rgba(250,250,250,0.5);
}
a:visited{
text-decoration: none;
color: rgba(250,250,250,0.5);
}
input.MyButton {
display: inline-block;
width: 80px;
height: 20px;
font-weight: bold;
background: rgba(0,0,0,0.5);
color: rgba(250,250,250,0.5);
cursor: pointer;
border-radius: 10px;
border: none;
}
#menu{
display: inline-block;
}