This button's "padding" makes no sense - html

Question

I was trying to make a button with a red border thats in the bottom and in the middle, but, its padding doesn't let me! You can see with the border, its like 100% width, it makes no sense.
Ive tried everything, the only "solution" i found, was to set the margins to something like 200px, but the hitbox is still massive in the x axis, if someone knows what might becausing this i'd appreciate an answer, thank you!!
HTML:
<div class="message">
<h1>NA CONJUGAÇÃO DO COMPROMISSO, DO ACOMPANHAMENTO E DA ATENÇÃO.</h1>
<h3>A colaboração de todos é fundamental para a concretização dos pressupostos de uma escola que todos queremos.</h3>
</div>
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>
CSS:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
text-align: center;
color: white;
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
}
How it looks: (except background)

Answer 1

A commenter correctly points out that you should probably change your element from div to button. However, if for some reason you need to keep the element as-is, adding the following CSS rules should center it:
width: fit-content;
margin: 0 auto;
display: block;
Here's a demo:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
width: fit-content;
margin: 0 auto;
display: block;
}
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>