Underscores - side by side DIVs

I'm playing around with CSS and Underscores. I've tried to place 2 DIV's side by side, but it have no idea how to do that.

This is what I have and what I want to achieve

First idea: set these items as inline elements. Easy to say, not easy to do.

There was a very similar question a few years ago: Side by Side DIVs in Wordpress/Underscores

I've tried this code:

.site-branding {
  clear: none;
  display: inline;
  }

.site-title {
  clear: none;
  display: inline;
  }

.main-navigation {
  display: inline;
  }

<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Sitename</a></h1>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
  </nav><!-- #site-navigation -->
</header><!-- #masthead -->

with no result (only my header background has disappeared).

I have no idea what I'm doing wrong (still newbie in CSS), so I will be extremely grateful for targeting me. I thought, that setting clear: none for an element means "do not clear it, regardless of the overriding elements" (quite logical for me).

This is a "clear" Underscores template, so the whole CSS can be found here: https://github.com/Automattic/_s/blob/master/style.css

HTML:

<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Sitename</a></h1>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<ul>
  <li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
  </nav><!-- #site-navigation -->
</header><!-- #masthead -->

CSS:

.site-branding {
  clear: none;
  display: inline;
  }

.site-title {
  clear: none;
  display: inline-block;
  width:30%;
  }

.main-navigation {
  display: inline-block;
  width:50%;
  }

ul >li{
display: inline-block;
}

FIDDLE