Подчеркивания - рядом друг с другом DIVs

Question

Я играю с CSS и подчеркиваниями. Я попытался разместить 2 DIV бок о бок, но он понятия не имеет, как это сделать.

This is what I have and what I want to achieve

Первая идея: установить эти элементы в качестве встроенных элементов. Легко сказать, нелегко сделать.

Был очень похожий вопрос несколько лет назад: Side by Side DIVs in Wordpress/Underscores

Я попробовал этот код:

.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 -->

без результата (только мой фон заголовка имеет исчез).

Я понятия не имею, что я делаю неправильно (все еще новичок в CSS), поэтому я буду чрезвычайно благодарен за таргетинг на меня. Я подумал, что настройка clear: none для элемента означает «не очищать его, независимо от переопределяющих элементов» (вполне логично для меня).

Это "чистый" Подчеркивает шаблон, так что весь CSS можно найти здесь: https://github.com/Automattic/_s/blob/master/style.css

Answer 1

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