Padding only applies to me in 1 div, why? - html

Question

I write the same padding for 2 different div elements and it only applies to 1 of them.
I already tried applying the style to different elements, using margin, creating more divs, using width and probably more things, but can't find the solution. Also, is this a correct way of doing it? Should I use buttons instead?
HTML
<div class="login">
<div class="button1"><p class="pButton">Login to see list</p></div>
<div class="button2"><p class="pButton">Login to view profile</p></div>
</div>
CSS
.login {
text-align: center;
margin-right:2px 20px;
}
.button1 {
display: inline-block;
padding:2px 10px;
}
.button2 {
display: inline-block;
padding:2px 10px;
}
.button1, .button2 a {
background-color: #b0f4e6;
}

Answer 1

both div tags have same padding, and I've just found something wrong in your code.
in your CSS code,
/* It means applying background-color at .button1 and .button2 > a */
.button1, .button2 a {
background-color: #b0f4e6;
}
so, this codes would be like it
.button1, .button2{
background-color: #b0f4e6;
}
/* OR */
.button1 a, .button2 a{
background-color: #b0f4e6;
}
.login {
text-align: center;
margin-right: 2px 20px;
}
.button1 {
display: inline-block;
padding: 2px 10px;
}
.button2 {
display: inline-block;
padding: 2px 10px;
}
.button1,
.button2 {
background-color: #b0f4e6;
}
<div class="login">
<div class="button1">
<p class="pButton">Login to see list</p>
</div>
<div class="button2">
<p class="pButton">Login to view profile</p>
</div>
</div>

Answer 2

you can try [attribute^=value] selector. in this case , will use [class^="button"]

Answer 3

better u write ur code like this:
HTML
<div class="button1"><p class="pButton">Login to view List</p></div>
</div>
<div class="login">
<div class="button2"><p class="pButton">Login to see Profile</p></div>
CSS
.button1 , .button2 {
background-color: #b0f4e6;
}

Answer 4

.login {
text-align: center;
}
.button1 ,.button2{
display: inline-block;
}
.button1 a, .button2 a {
background-color: #b0f4e6;
padding:20px 10px;
color:black;
}
<div class="login">
<div class="button1"><p class="pButton">Login to see list</p></div>
<div class="button2"><p class="pButton">Login to view profile</p></div>
</div>
can u try this ?
that's all...