how to align multiple <h1> tags - html

Question

I wanted to make a header with a title in the center "Resources", left another title "HTML" and right another with "CSS" but I can not align them to put them in the right place and then add a border-right and border-left to separate the left and right title from the title to the center.
For the moment I have this:
header {
border: 2px solid white;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.2);
color: white;
}
h1 {
display: inline-block;
font-size: 30px;
font-family: Arial, sans-serif;
}
h1.html {
padding-left: 2%;
}
h1.res {}
h1.css {
padding-right: 2%;
}
<header>
<h1 class="html">HTML</h1>
<h1 class="res">Ressources</h1>
<h1 class="css">CSS</h1>
</header>
Because of the display: inline-block; it works better but I do not know how to do it.

Answer 1

It would be simpler to replace the <h1> tags with <span> elements because they are inline by default. The left and right separation can be accomplished several ways. See example below.
.header {
text-align: center;
border-radius: 20px;
background-color: rgba(0,0,0,0.2);
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
font-size: 24px;
}
.header span:nth-child(1) {
float: left;
width: 33%;
border-right: 2px solid white;
}
.header span:nth-child(3) {
float: right;
width: 33%;
border-left: 2px solid white;
}
<div class='header'>
<span>HTML</span>
<span>RESOURCES</span>
<span>CSS</span>
</div>

Answer 2

You can use a flex layout to position the headings. Add this to your existing header ruleset:
header {
display: flex;
justify-content: space-between;
}