CSS i 3 divy w poziomie

dzień dobry, mam problem. https://jsfiddle.net/1ckgdhL0/
potrzebuje wyśrodkować logo w zwyklym cssie. znalazłem sposób, że jak się zmieni kolejność (left, right i nic), to ostatni się centruje, ale nie mogę jej zmienić - takie zadanie.
ma być wyświetlanie blokowe, w takiej kolejności i samym cssem. takie nic i tyle czasu już mi zajeło a dalej nie mogę sobie poradzić. bardzo serdeczna prośba o pomoc

flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/pl/docs/Learn/CSS/CSS_layout/Flexbox
https://www.w3schools.com/css/css3_flexbox.asp

W treści zadania jest, żeby logo było wyswietlane blokowo i wyśrodkowane w poziomie. Nie wiem czy mogę użyć flexa

header {
  display:table;
  width: 100%;
  border:1px solid red;
}

header > * {height: 200px;}

#title {
  display:table-cell;
  width:100px;
  background-color: yellow;
}

#logo {
  display:block;
  margin:auto;
	height: 100px;
}

nav {	
  display:table-cell;
  width:300px;
  height: 100px;
  background-color: red;
  text-align: center;
}

    <header>
        <div id="title">TYTUL</div>
        <img id="logo" src="fiddle.jshell.net_pliki/Google-Chrome-logo-svg-512x512.png">
        <nav>
            <a>Home</a>
            <a>Home2</a>
            <a>Home3</a>
            <a>Home4</a>
        </nav>
    </header>

Freja Draco napisał(a):

header {
  display:table;
  width: 100%;
  border:1px solid red;
}

header > * {height: 200px;}

#title {
  display:table-cell;
  width:100px;
  background-color: yellow;
}

#logo {
  display:block;
  margin:auto;
	height: 100px;
}

nav {	
  display:table-cell;
  width:300px;
  height: 100px;
  background-color: red;
  text-align: center;
}

    <header>
        <div id="title">TYTUL</div>
        <img id="logo" src="fiddle.jshell.net_pliki/Google-Chrome-logo-svg-512x512.png">
        <nav>
            <a>Home</a>
            <a>Home2</a>
            <a>Home3</a>
            <a>Home4</a>
        </nav>
    </header>

no wlasnie, chodzi o to zeby na lewo byl tytul, na srodku logo a po prawo nav

    <header>
        <div id="title">TYTUL</div>
        <img id="logo" src="fiddle.jshell.net_pliki/Google-Chrome-logo-svg-512x512.png">
        <nav>
            <a>Home</a>
            <a>Home2</a>
            <a>Home3</a>
            <a>Home4</a>
        </nav>
    </header>

no wlasnie, chodzi o to zeby na lewo byl tytul, na srodku logo a po prawo nav

rozwiazanie jest ok, ale treścią zadania i całą trudnością jest to, że nie moge nic zmienic w htmlu.
jak zamienie miejscami #title z #logo to wszystko odpowiednio sie pokazuje, nie potrafie w samym cssie zamienić ich miejscami. zrobie to chyba flexboxem - przeciez to wyswietlanie blokowe a takie jest zadanie.

No to zostaje ci użyć flexa i order:
https://www.w3schools.com/cssref/css3_pr_order.asp