attribute element is scaled weirdly

Question

.otherprogramTemplate {
  background-color: rgba(0, 0, 0, 0.75);
  width: 400px;
  height: 185px;
  border-radius: 8px;
  margin: auto;
  color: white;
  padding: 0;
}

.otherprogramButton {
  text-decoration: none;
  text-align: center;
  padding: 0;
}

<a href="https://github.com/Necrosis000/Necrosis-Random-Colour-Generator" class="otherprogramButton">
  <div class="otherprogramTemplate">
    <p class="programTitle">Other Programs</p>
    <p class="programDesc">Click here to go to a list of my other programs/websites</p>
  </div>
</a>

I'm really unsure why but my elements width is greater than the actuall size of the div and I don't know why the blue part should fit around the red part but it's longer and stretches around the whole screen.

The height is fine it's just the width

Answer 1

TLDR:
Adding display: inline-block to your <a> should fix it.

Explanation:
Why is it covering the whole width? Because a tag has a default display type of inline. This means that it will take up the width of it's content.
Now, the direct child of this a is a div which has a default display type of block. Since block elements have a tendency to cover up the WHOLE row, this is being spread across the screen width.
Adding width to a div without changing it's display type would have no effect.

Hope this helps.