Adjust height of button according to navbar html - html

Question

I have a navbar and a button defined in HTML like this :
<div class="topnav">
<a class="active" href="#home">Hooligans</a>
<button class="button"><p style="font-family:courier;">drop dead</p></button>
</div>
The CSS for the above goes like this :
.topnav {
background-color: #F9FAFA;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #BA55D3;
text-align: center;
padding: 8px 5px;
text-decoration: none;
font-size: 3vw;
}
.button {
background-color: #F9FAFA;
border: 2px solid #BA55D3;
border-radius: 5%;
color: #BA55D3;
text-align: center;
margin-left: 70%;
display: inline-block;
}
Right now, the best I can do is the button to fit exactly inside navbar. I want it to be smaller than the navbar like the Signup button in the stackoverflow navbar.
When I set height of the button the text inside the button goes out of the border and when I try padding the button goes bigger.
Any help ?

Answer 1

Remove the <p> tag inside the button, that is what's causing the unexpected margins. Also, I added display: flex to center align the items in the nav:
.topnav {
background-color:#F9FAFA ;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
overflow: hidden;
display: flex;
align-items: center;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #BA55D3 ;
text-align: center;
padding: 8px 5px;
text-decoration: none;
font-size: 3vw;
}
.button{
background-color: #F9FAFA ;
border:2px solid #BA55D3;
border-radius: 5%;
color:#BA55D3;
text-align: center;
margin-left: 70%;
display: inline-block;
font-family: courier;
font-size: 1vw;
}
<div class="topnav">
<a class="active" href="#home">Hooligans</a>
<button class="button" >drop dead</button>
</div>