画像1のお借り先のような感じにしたいのですがどうしても画像2のようになってしまいます。
（🟦がお借り先の正式なもの
　🟥が私が編集したレイアウトになります）



🟦HTML・css

<!-- ここにベースCSSを書く -->
<style type="text/css">
/* 全体設定 */
body {
background-color: #434b48;
color: #b1bab6;
}
a:link {color: #b8ab84;}
a:visited {color: #9d8d5b;}

<nopc>
body {
line-height: 1.5;
font-size: x-small;
}
<imode>
a:focus {color: #222d2f;}
</imode>
<softbank>
a:focus {color: #839b5c;}
</softbank>
</nopc>
<pc_only>
body {
line-height: 1.7;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
font-size: 87.5%;
letter-spacing: 1px;
}
</pc_only>
<smartphone>
body {
line-height: 2;
font-family: Roboto, "Droid Sans", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 14px;
letter-spacing: 1px;
}
</smartphone>
<pc>
a:hover, a:active, a:focus {
position: relative; bottom: 1px;
text-decoration: none;
color: #839b5c;
}
</pc>

<nopc>
input, select, textarea {
background-color: #5b6662;
color: #a8b2ae;
}
input:focus, select:focus, textarea:focus {
background: #bac2bf;
}
</nopc>
<pc>
input[type="text"], input[type="password"], input[type="number"], select, textarea {
border: 1px solid #6a8279;
color: #7a948a;
}
input[type="text"]:hover, input[type="text"]:focus, input[type="password"]:hover, input[type="password"]:focus, input[type="number"]:hover, input[type="number"]:focus, textarea:hover, textarea:focus, select:hover, select:focus {
border: 1px solid #b3c1bc;
}
input[type="submit"] {
border: 1px solid #6a8279;
color: #7a948a;
}
input[type="submit"]:hover, input[type="submit"]:focus {
border: 1px solid #b3c1bc;
background-color: #73817b;
color: #c3cac7;
}

/* 外枠 */
.waku {
width: 500px;
margin: 0 auto;
}
@media only screen and (max-width: 560px) {
.waku {width: auto;}
}
</pc>

/* 画像サイズ制御（画面サイズを超える画像は縮小） */
.waku img {
width: auto;
max-width: 100%;
height: auto;
}

/* 左右余白設定 */
<nopc>
.yohaku {
padding: 1em 10px 0.5em 10px;
}
</nopc>
<pc_only>
.yohaku {
padding: 1.5em 30px 0.5em 30px;
}
</pc_only>
<smartphone>
.yohaku {
padding: 1.5em 6% 0.5em 6%;
}
</smartphone>

/* タイトル設定 */
.title {
line-height: 1.3;
color: #c28f70;
}
<nopc>
.title {
font-size: small;
}
</nopc>
<pc>
.title {
font-family: "Times New Roman", serif;
font-size: 1.2em;
}
</pc>

/* メニュー設定 */
.menu {
padding: 0.5em 0;
font-family: "Georgia", serif;
}

/* 見出し設定 */
.midashi {
line-height: 1.5;
padding: 1px 0.5em;
margin-bottom: 0.5em;
border-bottom: 3px double #8faab0;
color: #8faab0;
font-family: serif;
}
<pc>
span.midashi {
display: inline-block;
*display: inline;
*zoom: 1;
}
</pc>

/* 汎用タグ */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

</style>


🟦全体レイアウト　

<div class="waku yohaku"><img src="トップ画像URL" alt="" /><br /><span class="title">サイト名</span> / カウンター
<div class="menu">リンクメニュー</div>
#clap数字#<br />
ここに内容
</div><!-- end.waku.yohaku -->

※以下サンプル※
▼文字寄せ
<div class="left">左寄せ</div>
<div class="right">右寄せ</div>
<div class="center">中央寄せ</div>

▼見出し
<span class="midashi">文字分だけ</span>
<div class="midashi">一行ブロック</div>

▼拍手例
#clap数字#
（基本設定⇒ページ貼付時のリンクタイプ⇒レイアウト指定
　貼付け時レイアウト⇒『#formStart##formInput_18#　#formSubmit_ボタン名##formEnd#』※18やボタン名の部分はお好きなように）

▼テキストエリア例
<textarea name="link" rows="3" cols="18">&lt;a href=&quot;http://nanos.jp/サイトID&quot;&gt;サイト名&lt;/a&gt;*お名前</textarea>

になります。
HTMLはそのままトップページ編集のHTMLに貼り付け、その下枠に全体レイアウトを貼り付けました。
編集をして貼り付けたのが以下の物になります。


🟥全体レイアウト

<div class="waku yohaku"><img src="##IMAGE_DATA_4_URL##" alt="" /><br /><span class="title">サイトタイトル</span> / カウンター
<div class="menu">#fp1_info#</div>
#clap数字#<br />

<br>
<br>
<span class="midashi">説明タイトル</span><br>
あいうえお
かきくけこ
<br>
</div><!-- end.waku.yohaku -->

と編集をしたのですがうまく出来ず文字も左に寄り過ぎたり、タイトルの色や他の箇所も正式なテンプレートと同じようになりません。編集せず貼り付けても画像�Aのようになってしまいます。