Make a Button Responsive and Centered Horizontally - html

Question

I'm currently working on a website and I'm trying to make a button that is centered and responsive but it is just not working!
HTML:
<div id="button-container">
<button id="who-are-we" class="font-spec">quem somos</button>
</div>
CSS:
#button-container {
width: 120px;
display:block;
position:relative;
margin-top: 100px;
margin-left: 50%;
text-align: center;
height: auto;
}
#who-are-we {
font-family: Volkorn;
background: white;
border: 4px solid black;
cursor: pointer;
max-width: 180%;
max-height: 100%;
width:220px;
height: 70px;
font-size: 200%;
text-align: center;
}
I tried messing with the margins but there must be a simpler way of doing this, I am also trying to make the button smaller when the window gets smaller.

Answer 1

Use percentages (%) when assigning widths and heights.
Also, I don't get why the #who-are-we width (220px) is greater than the #button-container width (120px)
Here's an example:
#button-container {
width: 100%;
display:block;
position:relative;
margin-top: 100px;
text-align: center;
height: auto;
}
#who-are-we {
font-family: Volkorn;
background: white;
border: 4px solid black;
cursor: pointer;
max-width: 180%;
max-height: 100%;
width:220px;
height: 70px;
font-size: 200%;
text-align: center;
}
<div id="button-container">
<button id="who-are-we" class="font-spec">quem somos</button>
</div>

Answer 2

Not clear if you want vertical or horizontal centering, but here is an example of horizontal centering, and the button is width:30%; of the page. The button is centered because its parent is 100% width (by default because it is a div) and has text-align: center; which centers all the child elements.
#button-container {
margin-top: 100px;
text-align: center;
}
#who-are-we {
font-family: Volkorn;
background: white;
border: 4px solid black;
cursor: pointer;
width:30%;
height: 70px;
font-size: 200%;
text-align: center;
}
<div id="button-container">
<button id="who-are-we" class="font-spec">quem somos</button>
</div>