Element in the header is not align by flexbox why? here are some conditions I has to follow

Question

Conditions

1. I can't change anything in the HTML file.
2. I can only use flexbox to do that.

The final result

Current condition

HTML

<header>
      <h1><a href="index.html">Super Legit News</a></h1>
      <h2><a href="index.html">Where fake news are born!</a></h2>
      <div id="signup">
        <a href="register.html">Register</a>
        <a href="login.html">Login</a>
      </div>
</header>

In CSS I Just tried that after that I try some other properties but did not get the restult

body>header{
    display: flex;
    flex-direction: column;
}

header>div{
    align-self: flex-end;
}

After adding CSS

I think I missing something in using flexbox

Answer 1

You could do this using flex-flow: row wrap;

header {
  width: 100%;
  background: blue;
  display: flex;
  flex-flow: row wrap;
  padding: 30px;
}
header h1 {
  width: 100%;
  margin: 0 0 20px;
}
header h2 {
  margin: 0;
}

#signup {
  margin-left: auto;
  margin-top: auto;
}

a {
  color: white;
}

<header>
      <h1><a href="index.html">Super Legit News</a></h1>
      <h2><a href="index.html">Where fake news are born!</a></h2>
      <div id="signup">
        <a href="register.html">Register</a>
        <a href="login.html">Login</a>
      </div>
</header>