How to fix hover not working at center of text - css

Question

Im coding a blog and trying to make "Read More" button at the bottom of article. When i use hover to make button green, it works only if user points his mouse at left or right of button. When im pointing mouse at center of text nothing is working.
<div class="readmore"><p>Read more</p></div>
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 30px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.18s linear;
color: white;
}
I expect button to backgroundcolor darkgreen and color white when im pointing mouse at center of text.
ALL CSS CODE:
body
{
background-color: white;
width: 100%;
margin: auto;
font-family: 'Open Sans', sans-serif;
background-color: palegreen;
}
.mateleafs
{
color: forestgreen;
font-size: 21px;
font-family: 'Merienda', cursive;
}
.header
{
background-color: white;
text-align: center;
padding-top: 1px;
padding-bottom: 3px;
border-bottom: green 2px solid;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
ul
{
word-spacing: 100px;
}
li
{
list-style-type: none;
display: inline-block;
font-size: 15px;
}
a
{
text-decoration: none;
color: black;
padding-top: 35px;
padding-bottom: 22px;
padding-left: 25px;
padding-right: 25px;
}
.home a
{
color: green;
}
.mateleafs a
{
color: green;
}
.home a:hover
{
background-color: yellow;
}
.history a:hover
{
background-color: dodgerblue;
}
.health a:hover
{
background-color: limegreen;
}
.energy a:hover
{
background-color: red;
}
.other a:hover
{
background-color: gray;
}
.mateleafs:hover
{
transform: rotate(-1deg);
}
.grid-content-container
{
display: grid;
margin-left: 50px;
margin-top: 230px;
margin-right: 50px;
grid-template-columns: 450px 450px 450px;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-auto-rows: 690px;
text-align: center;
}
.grid-content-container a
{
color: black;
}
article
{
background-color: navajowhite;
font-size: 15px;
color: darkgreen;
text-align: center;
}
main
{
background-color: white;
}
.footer
{
border-top: 2px solid green;
background-color: white;
padding: 10px;
margin-top: 60px;
text-align: center;
}
img:hover
{
opacity: 0.7;
transition: 0.45s ease-out;
}
.grid-content-container h2:hover
{
color: green;
transition: 0.45s ease-out;
}
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 25px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.24s ease-out;
color: white;
}
.date
{
font-size: 12px;
color: seagreen;
}
i
{
margin-right: 2px;
}

Answer 1

Your CSS and HTML work fine (as tested below). I assume you have some p tag styling that is overwriting the readmore style.
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 30px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.18s linear;
color: white;
}
<div class="readmore"><p>Read more</p></div>

Answer 2

.readmore
{
display: block;
width: 200px;
padding: 12px;
text-align: center;
}
.readmore:hover
{
background-color: gray;
transition: 0.7s;
color: black;
border-radius: 9px;
}
<div class="readmore"><p>Read more</p></div>