CSS Box-model Project button

Hi, so I was doing the project and completed all the steps so was just messing around with the code.
My problem comes in where I wanted the button to be centered on the screen so I wanted to add a margin but there was already one in there for the class:
.button {
border-radius: 4px;
color: #05A8AA;
display: block;
font-weight: 700;
width: 200px;
padding: 20px;
margin: 40px auto:
border: 1px solid blue;

However when I created a seperate selector of:
.body a {
display: block;
margin: 0px auto;

I managed to get it central, the main point is why did the margin in the “.button” class not center the button but “.button a” did?

Heres the link to the lesson project I was messing with: