CSS Flexbox- Too much extra vertical space - html

Question

I'm really new to CSS/programming in general and am trying to build a website logo for a friend as practice. He wants his name justified across the entire header and responsive to the page, and I came up with something that ALMOST works perfectly. Here's what I've got:
<style>
body {
background: black;
}
.container {
overflow: hidden;
line-height: 1em;
color: white;
}
.header {
border: 1px solid white;
width:30%;
margin: 20px 0 0 0;
padding: 5px;
display:flex;
flex-direction: column;
line-height: 0em;
align-items: center;
}
.header h1{
flex-direction: row;
display:flex;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: center;
width: 100%;
}
.header h1 p {
text-align: center;
/* background: gray;
*/
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
width: 100%;
font-size: 20px;
}
</style>
<div class="container">
<div class="header">
<h1><p>I</p><p>S</p><p>T</p><p>H</p><p>I</p><p>S</p></h1>
<h1><p>T</p><p>O</p><p>T</p><p>A</p><p>L</p><p>L</p><p>Y</p></h1>
<h1><p>I</p><p>N</p><p>S</p><p>A</p><p>N</p><p>E</p><p>?</p></h1>
</div>
</div>
So it looks okay, at the moment, and I'm comfortable incorporating it into the rest of the site CSS. The problem I'm having is twofold:
A) I cannot seem to adjust the flexbox properties to eliminate/control all of that empty space. The width is fine but the box is too high, and I'm unsure which combination of properties I need to achieve fine-grained control of the header's height.
B) It has 20 p's in a row at the end. This seems inefficient? I'd like to keep it pure CSS for the moment, so this might be unavoidable, but is there a better way to do this by incorporating another language?
Apologies for any rookie mistakes/StackOverflow faux pas. Infinite apologies if this has already been answered clearly elsewhere.