How to fix size of button for mobile view - html

Question

I want that the size of my button should get fixed for the mobile view but it should be auto for window. how can I do it, please help? Or it should be auto placed in the center. I am using this code. I am using CSS like this.
.button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 {
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;}
.button2 a:link, .button2 a:visited {
background-color: #FF5733;
color: white;
text-decoration: none;
}
.button2 a:hover, .button2 a:active {
background-color: #FF5733;
color:#000000;
}
#media screen and (max-width: 680px) and (min-width:0px){
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;
}
.button1 { padding: 6px 32px;width: 85px;max-height:88px;}
}}
<button style="margin:auto"class="button button1">BUY NOW</button><button style="margin:auto;" class="button button2">DETALS</button>

Answer 1

Could the issue be that you have the button style set to auto in your inline CSS in your html page? That would override the margins you are setting in your CSS page. Maybe that is effecting the way the buttons are being displayed, because the media query looks good. I really hope this helps. Good luck!