Jak wycentrować dwa nagłówki wewnątrz główki?

Mam napis "Jeden tekst". Chciałbym by "Jeden" było zielone i pogrubione a ten drugi nie koniecznie. Na stronie ma się to prezentować jako jeden napis po środku diva/strony a następne już pod spodem. Na razie mam wszytko prócz tego by ten "Jeden tekst" był po środku strony/div. Co mogę z tym zrobić? Myślałem żeby zamknąć nagłówki h1 w osobnym divie i go wycentrować ale nie wiem czy to jest dobra praktyka? Może da się to jakoś inaczej zrobić?
Kod HTML:

<header class="page-title">
    <h1>Jeden</h1>
    <h1>teskt</h1>
    <h4>To tylko tekst testowy.</h4>
</header>

A tutaj kod CSS

.page-title {
    width: 100vw;
    margin-top: 12vh;
    margin-bottom: 12vh;
}

.page-title>h1 {
    color: #263238;
    display: inline;
}

.page-title>h1:first-child {
    font-weight: bold;
    color: #4CAF50;
}

.page-title>h1:last-child {
    clear: left;
}

.page-title>h4 {
    text-align: center;
    color: #263238;
    margin: 0px;
}

Nie znam sie na HTMLu, ale widzę, że "Nie czuję, że rymuję". Musiałem wybaczcie za off.

Zacznijmy od tego że h1 może być tylko raz użyte na danej podstronie

W porządku. W taki razie "Jeden napis" w nagłówku i słowo "Jeden" w jakimś divie z klasą? To było by optymalne rozwiązanie?

<header class="page-title">
    <h1>
        <div style="font-weight: bold;color: #4CAF50;">Jeden</div>Tekst
    </h1>
    <h4>To tylko tekst testowy</h4>
</header>

.page-title {
    width: 100vw;
    margin-top: 12vh;
    margin-bottom: 12vh;
}

.page-title>h1 {
    text-align: center;
    color: #263238;
}

.page-title>h4 {
    text-align: center;
    color: #263238;
}

ok, tylko tak czy wiesz do czego są nagłówki hx? Bo potem widzę zaraz h4 użyte. Nagłówki są by dawać tytuły danym sekcjom strony i podtytuły, i kolejne pod tytuły, innymi słowy użycie h4 tak jak użyłeś jest niepoprawne bo h4 powinien być podtytułem sekcji której tytułem jest h3.

prościej by było zrobić <h1 class=... zamiast tworzyć specjalnie diva ze stylami, a je wszystkie wpisać w plik css

Pytanie co chcesz dokładnie osiągnąć. Jeżeli zależy Tobie na tym, żeby tekst "Jeden napis" był po prostu po środku a "Jeden" był zielony, no to myślę, że to będzie ok:
https://jsfiddle.net/o5o9490h/4/ . Jak "Jeden" i "napis" mają być jedno pod drugim wycentrowane, to wystarczy do spana dodać display: block.
Poza tym dobrym wyborem będzie właśnie znacznik span zamiast diva w h1.

Ok, mam coś takiego.

<header class="page-title">
    <h1>
        <div style="font-weight: bold;color: #4CAF50;">Jeden</div> teskt
    </h1>
    <p>To tylko tekst testowy.</p>
</header>

.page-title {
    width: 100vw;
    margin-top: 12vh;
    margin-bottom: 12vh;
}

.page-title>h1 {
    text-align: center;
    color: #263238;
}

.page-title>p {
    text-align: center;
    color: #455A64;
    font-size: 34px;
    font-weight: 400;
    line-height: 52px;
}

Ale ja dalej mam problem ponieważ "Jeden" i "tekst" nie są w jednej linii.
Zobaczcie załącznik w moim wcześniejszym poście.

EDIT:
Nie widziałem tego posta wyżej.

EDIT 2:
Po syntezie:

<header class="page-title">
    <h1>
        <span>Jeden</span> tekst
    </h1>
    <p>To tylko tekst testowy.</p>
</header>

.page-title {
    width: 100vw;
    margin-top: 12vh;
    margin-bottom: 12vh;
}

.page-title>h1 {
    text-align: center;
    color: #263238;
}

.page-title h1 span {
    color: #4CAF50;
    font-weight: bold;
}

.page-title>p {
    text-align: center;
    color: #455A64;
    font-size: 34px;
    font-weight: 400;
    line-height: 52px;
}

Muszę bardziej zapoznać ze znacznikami html 5 ale teraz wygląda tak jak chciałem, brakowało tego znacznika "span".
Jak dodałem znacznik "p" zamiast "h4" to jest lepiej?

Jeżeli w tym znaczniku p będziesz miał po prostu zwykły tekst to ok, ale jak chcesz dać tam jakiś podtytuł czy coś ważniejszego to spróbuj wykorzystać h2 na przykład.

p to akapit, ja bym użył innego span albo div w tym miejscu

.page-title { text-align: center;} h1 {margin: auto;}

lub

h1 { width:100%; text-align: center;}