HTML button not styling correctly - html

Question

I am attempting to recreate buttons that I have already created for my desktop site by using the same css styling on the mobile buttons. i have tried deleting the css one line at time and it doesn't seem to be the css (after all the same css works for the desktop buttons.
The problem: I want the buttons to be completely styled but instead it is leaving the stock button and adding the style as a border
#clients-title {
background: #f4f4f4;
padding: 1rem 0;
}
#clients-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid .cr-btn {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clients-btn-grid .cr-btn:hover {
cursor: pointer;
background-color: #333;
}
#media(max-width: 800px) {
#clients-btn-grid {
display: none;
}
}
.mobile-grid {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#media(min-width: 800px) {
.mobile-grid {
display: none;
}
}
<section id="clients-title">
<div class="grid-items">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
</div>
<div id="clients-grid">
<div class="grid-items">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
American Equity
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
IRS-Where's My Refund?
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
</div>
</div>
</div>
<div id="clients-btn-grid">
<div class="grid-items">
<button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
</div>
</div>
</section>
If you click full screen after running the code you can see the buttons displaying correct.
SOLUTION: Instead of targeting the div that the button is in I just needed target the parent div with buttons e.g
#clients-grid button {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

Answer 1

You did not style buttons inside #clients-grid. I also recommend you to use the same button tags for desktop and mobile view, because it would be a desaster if you have to change a link for example.
Just delete the .mobile-grid div around the button tags and style the buttons like in the desktop view.

Answer 2

added
button {
background-color: #4C9FCF;
color: white;
border: none;
}
button:focus{
outline:none}
#clients-title {
background: #f4f4f4;
padding: 1rem 0;
}
#clients-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid {
display: grid;
background: #f4f4f4;
text-align: center;
padding: 1rem 0;
margin: 0 10%;
grid-template-columns: 33.3% 33.3% 33.3%;
}
#clients-btn-grid .cr-btn {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
#clients-btn-grid .cr-btn:hover {
cursor: pointer;
background-color: #333;
}
#media(max-width: 800px) {
#clients-btn-grid {
display: none;
}
}
.mobile-grid {
background-color: #4C9FCF;
margin-left: auto;
margin-right: auto;
margin-top: -40px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
button {
background-color: #4C9FCF;
color: white;
border: navajowhite;
}
button:focus{
outline:none}
#media(min-width: 800px) {
.mobile-grid {
display: none;
}
}
<section id="clients-title">
<div class="grid-items">
<h2 class="m-heading text-center">
<span id="client-r" class="text-primary">Client</span> Resources
</h2>
</div>
<div id="clients-grid">
<div class="grid-items">
<h2>
TD Ameritrade Access
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://www.advisorclient.com/login'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
American Equity
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'">LOGIN</button>
</div>
</div>
<div class="grid-items">
<h2>
IRS-Where's My Refund?
<p></p>
</h2>
<div class="mobile-grid">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'">LOGIN</button>
</div>
</div>
</div>
<div id="clients-btn-grid">
<div class="grid-items">
<button onclick="location.href='https://www.advisorclient.com/login'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://client.american-equity.com/Login/login?ReturnUrl=%2F'"class="cr-btn">LOGIN</button>
</div>
<div class="grid-items">
<button onclick="location.href='https://sa.www4.irs.gov/irfof/lang/en/irfofgetstatus.jsp'"class="cr-btn">LOGIN</button>
</div>
</div>
</section>