tags - h1 と p タグは同じ行にあるが、h1 の幅は維持する

Question

ハイ、だから私はこれを持っています：

    #header
    {
    width: 90%;
    height: auto;
    margin: 0 auto 3% auto;
    border-bottom: 1px solid black;
    }

    #header p, h1
    {
    display: inline;
    }
    #header p
    {
    font-style: italic;
    }

    h1
    {   
    width: 40%;
    border-right: 2px solid black;
    font-family: Franklin Gothic Medium;
    text-transform: uppercase;
    font-size: 2.8em;
    margin-left: 2%;
    text-shadow: 0px 0px 2px white;
    }

そしてHTML

    <div id="header">
    <h1>Heading Blog Title</h1>
    <p>Site description Site description Site description Site description</p></div>

次のようになります: http://i.imgur.com/TvVKjo9.jpg

しかし、私は h1 の幅もこのように保ちたい: http://i.imgur.com/YzWO8YN.jpg 基本的に中央に

h1タグと一緒に。写真1は私が使用した場所です

    #header p, h1
    {
    display: inline;
    }

両方のための。2 番目の写真では、h1 タグは希望どおりに配置されていますが、

それをねじ込みます。2 番目の写真では、display: inline-block; を使用しました。h1の場合。また、p の説明は中央の位置に配置されていません。margin pr パディングを使用できますが、写真 2 でわかるように、説明の残りの部分は h1 タグの下に続きます。これを相対位置で修正し、p タグをマージンにしました。 、しかし、％を使用したため、解像度が高いまたは小さい場合は #header の下または上になります。これを修正するためのトリックはありますか？ありがとう