How do I align my button under my heading, and make the button responsive?

Question

I am trying to put a button under a heading, but the button is being pushed to the side. I assume it has to do with absolute position or something, but I am not too sure. I also want to make the button responsive like the text, so that the size of the button changes in different windows.

HTML:

    body{
      font-family: sans-serif;
      margin:0px;
    }
    .splash{
      background-color: #faead3;
      height: fill;
      padding: 0;
      margin:0;
      display: flex;
      justify-content: left; /* align horizontal */
      align-items: center; /* align vertical */
      height: 100vh;
    }
    
    .splash h1{
      margin:0px;
      font-size: 4.5vw;
      color: #08aabe;
      margin-left: 2.5em;
      padding-bottom: 3.5em;
    }
    .button {
        background-color: #08aabe; 
        border: none;
        color: #faead3;
        padding: 1em 2em;
        text-align: center;
        text-decoration: none;
        font-size: 1w;
    }

<div class="splash">
        <h1>Random Text.</h1>
      <a class="button"href="#">Button Link</a>
    </div>

https://codepen.io/anon/pen/qQraNB

Any help is appreciated, thanks!

Answer 1

You use display:flex whats make them be in same line so:

1.Remove display:flex from .splash

2.font-size: 1w; in .button {} is invalid change it to font-size: 2.5vw;

3. you can use margin-left: 4.5em; to button

See code in fiddle:

   body{
      font-family: sans-serif;
      margin:0px;
    }
    .splash{
      background-color: #faead3;
      height: fill;
      padding: 0;
      margin:0;
      height: 100vh;
    }
    
    .splash h1{
      margin:0px;
      font-size: 4.5vw;
      color: #08aabe;
      margin-left: 2.5em;
      padding-bottom: 3.5em;
    }
    .button {
        background-color: #08aabe; 
        border: none;
        color: #faead3;
        padding: 1em 2em;
        text-decoration: none;
        font-size: 2.5vw;
        margin-left: 4.5em;
    }

<div class="splash">
     <h1>Random Text.</h1>
      <a class="button"href="#">Button Link</a>
</div>