なぜかdivボックスが一つだけずれてしまいます

前提・実現したいこと

なぜか一つだけずれてしまいます・・

少しずついじってみたところ、右端の”配送について”と”お問い合わせ”以外に
適用させいる　.sp {margin-right: 32px;}　が原因のようで
コメントで隠すと全ての隊列が整いました。

ですがマージンライトを入れると”配送について”は問題ないのに
なぜか”お問い合わせ”だけずれてしまいます。

マージンライト以外にも何か原因があるのでしょうか？

どなたかわかる方いらっしゃいましたらよろしくお願い致します。。

該当のソースコード

---ＨＴＭＬ---

<footer>
	<div class="information">
		<p class="info">INFORMATION</p>
		
		<div class="guide-wrapp cf">
			<div id="up" class="cf">
				<div class="BOX sp"><h5 class="huta">商品について</h5></div>
				
				<div class="BOX sp"><h5 class="huta">注文</h5></div>
				
				<div class="BOX sp"><h5 class="huta">お支払方法について</h5></div>
				
				<div class="BOX"><h5 class="huta">配送について</h5></div>
			</div>
			
			
			<div id="under" class="cf">
<!--返品-->	　 <div class="BOX sp"><h5 class="huta">返品・交換について</h5>
				</div>
				
				<div class="BOX sp"><h5 class="huta">ギフトについて</h5></div>
				
                <div class="BOX sp">
				<h5 class="huta">営業日</h5>
				
                </div>
				
				<div class="BOX"><h5 class="huta">お問い合わせ</h5></div>
			
			
			</div><!--under-->
		</div><!--guide-wrapp-->
		
	
	</div><!--information-->
</footer>

---ＣＳＳ---

footer {
	width: auto;
	height: 764px;
	border-top: 8px solid #6a3906;
	background-color: #b0b0b0;
}

.information {
	width: 1280px;
	height: 756px;
	margin: 0 auto;
}

.info {
	padding: 64px 0;
	text-align: center;
	font-size: 40px;
	color: #54372b;
	letter-spacing: 0.3em;
}


.guide-wrapp {
	width: 960px;
	height: 532px;
	margin: 0 auto;
}

div#up {
	width: 960px;
	height: 250px;
}
div#under {
	width: 960px;
	height: 250px;
	margin-top: 32px;
}

div#up div, div#under div {
	float: left;
}


.BOX {
	width: 216px;
	height: 250px;
	background-color: #FFFFFF;
	box-shadow: 2px 3px 5px #4b4b4b;
}

.sp {
	margin-right: 32px;
}

.huta {
	width: auto;
	height: 28px;
	background-color: #bc9d7c;
	text-align: center;
	line-height: 2em;

補足情報（FW/ツールのバージョンなど）

DreamWeaver

kei344

2018/08/19 14:43

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

spookybird

2018/08/20 01:37

画像のようなレイアウトを実現するのにfloatを使うのがそもそも難しくなっている要因だと思うので、FlexboxやGridLayoutを使うことを検討されてみてはいかがでしょうか。

aboo

2018/08/20 08:44

お二方ともご回答ありがとうございます。　　 kei344様　　機能について教えていただきありがとうございました^^今更ではありますが今後のためにと思いコードブロック機能を使ってみました。自分から見ても見やすいですし次回からはちゃんとこの機能を利用致します！

aboo

2018/08/20 08:46

spookybird様　　つい最近勉強し始めたものでしてまだ知識があまりにも浅く・・・FlexboxとGridLayoutについて今から調べて勉強してみます^^使い方がわかり次第すぐさまこのフッターのコードも書き換えようと思ってます。ありがとうございます＾＾！

行動規範の内容に同意します

回答2件

ベストアンサー

<!--返品-->    　 <div class="BOX sp"><h5 class="huta">返品・交換について</h5>

この部分に全角スペースが含まれているためです。

<!--返品-->半半半半全半<div class="BOX sp"><h5 class="huta">返品・交換について</h5>

投稿2018/08/20 01:43

macaron_xxx

総合スコア3191

aboo

2018/08/20 08:56

ご回答ありがとうございました。半角スペースの有り無しで表示が崩れてしまうのですね･･･自分が見やすいように無駄に半角スペースでコードの位置を揃えたりしてました；とても助かりました。ありがとうございます^^ 別の方に教えて頂いた空白表示の機能を使って無駄なスペースを発見・削除しました。この度はありがとうございました！

行動規範の内容に同意します