Poravnava menija (HTML, CSS)

Zanima me kako bi poravnal seznam za meni, tako da bi prva dva elementa (Home, About) bila skrajno levo, druga dva pa skrajno desno (Services, Work)?

Tukaj je koda:

<section>
 <header>
  <nav>
   <ul>
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Work</li>
   </ul>
  </nav>
  <div class="logo"></div>
 </header>
</section>

Hvala.

Ja hvala, tako sem želel.

Me še nekaj zanima glede besedila znotraj div. Kako je narejeno, da se skrči besedilo navzdol? Recimo na tem forumu se post, če skrčim okno brskalnika, se vse besedilo pomakne navzdol. Ampak ostane znotraj roba.

Kaj če ima dva div-a vsak s width 50% znotraj enega diva s width 100%?

Seveda imam float: left, zato da sta eden zraven drugega. Potem besedilo znotraj tega div-a s 50% širino, dam max-width: 50%, ker je to moj max. Kaj pa če želim da ko se besedilo pomakne navzdol, da tudi border in barva ozadja se pomakne skupaj z besedilom?

Hvala, to vedno ne vem.