Line Break between text + button isn't working in h1

Issue

I'm trying to move the button underneath the text (which currently says "test?") but the line break(s) is doing nothing. I've googled everything I can think of and can't find anything about this so any help is appreciated!

Html and the CSS for the button if that's relevant:

.custom-button,
.custom-button:visited {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

<h1>
   Test? <br>
   <a class="custom-button" href="#scroll">Click Me</a>
</h1>

EDIT: Here's the code for the header as well, it seems like the display: flex part is causing the problem but how do I centre the text vertically without that? This is all new to me, so thank you guy for the help!

h1 {
    font-size: 62px;
    font-family: "Sofia", sans-serif;
    color: cyan;
    text-align: center;
    vertical-align: middle;
    background-color: grey;
    background-repeat: no-repeat;
    background-position: center;
    margin: -10px;
    height: 110%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

Solution

This is caused by the combination of display: flex and justify-content: center. Flexboxes are typically used to center things, so if you don't want it centered, there is little reason to use one.

Simply remove display: flex if you want it to set underneath the text. You can also remove justify-content and align-items when you do, as neither of those will affect anything if you remove display: flex:

.custom-button,
.custom-button:visited {
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

<h1>
   Test? <br>
   <a class="custom-button" href="#scroll">Click Me</a>
</h1>

Alternatively, if you want them both centered, you will need to apply your flex rules to both elements, along with flex-direction: column to ensure that the flexbox is vertical as opposed to horizontal:

.custom-button,
.custom-button:visited {
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

h1, a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<h1>
   Test? <br>
   <a class="custom-button" href="#scroll">Click Me</a>
</h1>

Answered By - Obsidian Age