Moving Button to the right - html

Question

I have an HTML Page with a CSS. I want to align some buttons to the right. Even though in the normal HTML pages without this CSS template, the button would move to the right, it does not work anymore. Same is the case for similar buttons on the page. Align to the center does not work either.
This is what the page looks like:
input.logout {
width: 100px;
padding: 7px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
}
input.logout:hover {
color: #ffff;
background: #000;
border: 1px solid #fff;
}
<form align="right">
<input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
</form>

Answer 1

If you are just going to have this .logout button on that line, you can just make it a block-level element with display: block, and add margin-left: auto so it is pushed to the right side; without using floats, since those can cause issues down the line.
input.logout {
width: 100px;
padding: 7px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
display: block;
margin-left: auto;
}
input.logout:hover {
color: #ffff;
background: #000;
border: 1px solid #fff;
}
<form>
<input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
</form>
If you are going to have multiple buttons on the same line, maybe Flexbox would be the way to go instead:
.flex {
display: flex;
justify-content: flex-end;
}
input.logout {
width: 100px;
padding: 7px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
margin-left: 5px;
}
input.logout:hover {
color: #ffff;
background: #000;
border: 1px solid #fff;
}
<form>
<div class="flex">
<input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
<input class="logout" type="button" value="Logout" onclick="window.location.href='logout.php'" />
</div>
</form>

Answer 2

Just add float:right to your button css
input.logout {
width: 100px;
padding: 7px;
cursor: pointer;
font-weight: bold;
font-size: 80%;
background: #3366cc;
color: #fff;
border: 1px solid #3366cc;
border-radius: 10px;
float: right;
}
input.logout:hover {
color: #ffff;
background: #000;
border: 1px solid #fff;
}
<form align="right">
<input class="logout" type="button" value="Logout"onclick="window.location.href='logout.php'" />
</form>