Stacking items with flexbox - css

Question

In my header, I'm trying to put my name in the middle item below the first item "brush up". I've tried justify-content and align-items and just can't get it to move. I also want the navigation to stay on the right side. New to flexbox thank you for any help.
.container {
display: flex;
margin: 0 auto;
max-width: 960px;
flex-direction: column;
}
/* HEADER SECTION***************************************/
header {
width: 100%;
height: 8vh;
display: flex;
flex-direction: row;
outline: 1px solid red;
}
header * {
margin: 0;
padding: 0;
display: block;
}
header h1 {
outline: 1px solid red;
height: 50px;
flex: 3;
}
header p {
flex: 2;
outline: 1px solid red;
height: 25px;
align-items: baseline;
}
header ul {
flex: 1;
justify-content: flex-end;
outline: 1px solid red;
list-style-type: none;
}
header ul li {
margin: 0 0.5em;
}
<header>
<h1>Brushing up</h1>
<p>by Keller Johnson</p>
<ul>
<li>home</li>
<li>project 1</li>
<li>project 2</li>
</ul>
</header>

Answer 1

Are you looking for this?
header {
width: 100%;
display: flex;
}
header, header > * {
outline: 1px solid red;
}
header > div {
flex-grow: 1;
}
header > ul {
flex: 0 0 200px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
list-style-type: none;
}
header * {
margin: 0;
padding: 0;
}
header h1 {
height: 50px;
}
header p {
outline: 1px solid red;
height: 25px;
}
header ul li {
margin: 0 0.5em;
}
<header>
<div>
<h1>Brushing up</h1>
<p>by Keller Johnson</p>
</div>
<ul>
<li>home</li>
<li>project 1</li>
<li>project 2</li>
</ul>
</header>
If this is not the result you want, consider explaining more clearly exactly what you're trying to achieve. Since we're talking about styling, a picture would help.