I am relatively new to css and html5, and I'm facing some issues with the alignment of my top buttons. They are currently aligned horizontally to the left, but I can't seem to add proper spacing between them. How can I adjust my code without disrupting the layout of the page? Thank you for your assistance! Here is the current code snippet:
.dashboard, #logOuta {
width:160px;
padding:10px 25px 12px 26px;
font-size:18px;
text-decoration:none;
font-family:Arial;
color:#fff;
text-align:center;
box-shadow:1px 1px 1px #666;
background:#23A3DA;
background-image:-webkit-linear-gradient(top,#23A3DA,#03171F);
background-image:-moz-linear-gradient(top,#23A3DA,#03171F);
background-image:-ms-linear-gradient(top,#23A3DA,#03171F);
background-image:-o-linear-gradient(top,#23A3DA,#03171F);
background-image:linear-gradient(to bottom,#23A3DA,#03171F);
border-bottom:2px solid #ffd175;
-webkit-border-radius:5;
-moz-border-radius:5;
border-radius:5px;
-webkit-box-shadow:1px 1px 1px #666;
-moz-box-shadow:1px 1px 1px #666;
cursor:pointer
}
.dashboard:hover {
background:#E3A019;
background-image:-webkit-linear-gradient(top,#E3A019,#E3A019);
background-image:-moz-linear-gradient(top,#E3A019,#E3A019);
background-image:-ms-linear-gradient(top,#E3A019,#E3A019);
background-image:-o-linear-gradient(top,#E3A019,#E3A019);
background-image:linear-gradient(to bottom,#E3A019,#E3A019);
text-decoration:none
} <div class="logoutbox">
<button class="dashboard">Dashboard</button>
<input name="logOuta" type="button" id="logOuta" value="Sign Out"/>
</div>