ロゴの横にサイトのタイトルとタグラインを移動するには？

Question

これは私のウェブサイトへのリンクです：http://www.ishturd.com

あなたは、ロゴは、サイトのタイトルとタグラインの上にあり、ここで見ることができるように、私はそれが側すなわちロゴやサイトのタイトルに並べて表示される必要がある、キャッチフレーズの意志それは今のようにタイトルの下に行く。私はコーディングを知らないので、どんな助けもありがたいです。ここで

は私のstyle.cssでサイトのタイトルの完全なCSS（申し訳ありませんが私が投稿するかわからなかった）

.site-title { 
    margin: 0; 
    color: #171717; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 34px; 
    font-size: 3.4rem; 
    font-weight: bold; 
    } 

    .site-title a { 
    color: #171717; 
    font-weight: bold; 
    text-decoration: none; 
    } 

    .site-title a:hover, 
    .site-title a:focus { 
    text-decoration: none; 
    } 

    .no-site-tagline .site-title { 
    margin-bottom: 22px; 
    margin-bottom: 2.2rem; 
    } 

    @media screen and (min-width: 800px) { 
    .site-branding { 
    float: left; 
    max-width: 50%; 
    } 

    .branding-right .site-branding { 
    float: right; 
    } 
    } 

    .site-description { 
    display: block; 
    margin: 11px 0 22px; 
    margin: 1.1rem 0 2.2rem; 
    font-size: 12px; 
    font-size: 1.2rem; 
    letter-spacing: 1px; 
    letter-spacing: 0.1rem; 
    text-transform: uppercase; 
    } 

    .site-description a { 
    text-decoration: none; 
    } 

    .site-description a:hover, 
    .site-description a:focus { 
    text-decoration: none; 
    } 

は、事前に感謝です！

Answer 1

は、私は、サイトブランディングHTMLをクリーンアップ、およびCSS：

HTML：

<div class="site-branding"> 
    <a href="http://www.ishturd.com/" class="custom-logo-link" rel="home" itemprop="url"> 
    <img width="151" height="105" src="http://www.ishturd.com/wp-content/uploads/2016/08/cropped-Ishturd-2.png" class="custom-logo" alt="cropped-Ishturd-2.png" itemprop="logo" sizes="(max-width: 151px) 100vw, 151px"> 
    <h1 class="site-title"> 
     ishturd 
     <br> 
     <span class="site-description">The Honest Part of The Internet</span> 
    </h1> 
    </a> 
</div> 

CSS：あなたがしたい場合は、さらにこのコードを向上させることができます

.site-branding { 
    width: 600px; 
} 
.site-branding a { text-decoration: none;} 
.site-branding a img { float: left;} 
.site-branding a h1 { float: left; width: 350px; padding: 0px; margin:0px;} 
.site-branding a span { font-size: 14px;} 

、チェックフィドル：

https://jsfiddle.net/Lvdt0ttd/