Flexboxで子要素が均等に配置されません

Question

前提・実現したいこと

Flexboxを使って配置しました。
下段も、上段と同じように親要素の端から端まで配置したいのですが
なぜずれてしまうのでしょうか？
余白自体は均等になっているようですが。。
まだ何か足りないコードがありますか？

それと、今回の質問とは話が違いますが
フッター以外の所にはすべてフロートを使って配置しているのですが
それらを全てFlexboxに書き換えてしまってもいいのでしょうか？
あまり乱用するべきではないとか、
こういう場面はフロートを使った方がいいなどの使い分けが必要とかありますか？
個人的にまだ理解しきれていないフロートよりもフレックスボックスがいいなと思ったのですが。

よろしくお願い致します。

該当のソースコード

ＨＴＭＬ

<footer> 
	<div class="information">
		<p class="info">INFORMATION</p>
		
		<div class="guide-wrapp 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 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 class="BOX"><h5 class="huta">お問い合わせ</h5></div>	
		</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;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
}

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

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

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

Dreamweaver

Answer 1

原因は閉じタグ忘れ

インデントを揃えてください．
（インデントは半角スペース2つ，もしくは4つずつになるように設定しましょう）

あと，閉じタグの後ろのスペースは削除しておきましょう．インライン要素的な振る舞いをするCSSを書いている場合，改行位置のずれの原因となります

<footer> 
  <div class="information">
    <p class="info">INFORMATION</p>
    <div class="guide-wrapp 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 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><!--guide-wrapp-->
  </div><!--information-->
</footer>

スクショを見てもらえれば分かると思いますが，画面サイズが小さいとこんなふうになります．
width等に直接「何%」と記述しても良いですが，flexboxのプロパティを使った方法もあります

• CSS Flexbox の各プロパティの使い方を詳しく解説

LiveWeaveでコードを実際に試しながらトライしてみてください．
また，Colissさんには，他にも解説記事が沢山載っています．
どんな技術があるのかを俯瞰出来て面白いので，紹介しておきます．

Comments

[aboo]

ご回答ありがとうございました。

閉じタグについてなのですが
コードをＤＷからこっちへコピペした際”営業日”内に記述していたテーブル要素を削除したのですが
その時に誤って営業日の閉じタグも消してしまったみたいでした。

なので実際にはＤＷ上では閉じタグはしっかりついており、
それでも配置が崩れてしまっておりました。

ところが教えていただいたLiveWeaveにコードをコピペすると
そちらでは隊列が揃っており、エラーもありませんでした。
添付してくださったスクショと同じ状態になっております。

ＤＭ上だけでなくグーグルクロームでも表示を確認しているのですが・・
他に何か考えられる原因はありますでしょうか；_；

それと、コリスさんのサイトをご紹介いただきありがとうございます。
私にも使えそうな参考記事等沢山ありとても参考になりました^^！
お気に入り登録しました!

[liveasnotes]

抜粋したコードで問題なかったということは，抜き出さなかった分のコードに原因が含まれていることになりますね...
隠したい部分は伏字にした上で，一度ページ全体のソースコードを載せてもらった方が分かりやすいかもしれません．ソースコードをそのまま載せると長いですし，Thimble(https://thimble.mozilla.org/ja/)にアップロードしてもらえればと思います．

---

ちなみにThimbleは，Firefox作ってる財団（Mozilla財団）が運営しており，永久無料だそうです．
・ログインして，アカウント名のところをクリック→「新規プロジェクト」をクリックすれば，エディタが開きます
・HTML,CSS,画像等をアップロードして，エディタ右上の「公開」ボタンから公開リンクを取得してください．
・エディタの編集内容は自動で保存されますが，公開ページの更新は「公開」ボタンからその都度行う必要があります
・外部リソース（Youtubeの埋め込み動画や画像など）はエディタ上では表示されませんが，公開ページ上では表示されるので安心してください
・画像を別のものに差し替えたい場合，placehold.jpが便利です．（https://alysantwanet.hatenablog.com/entry/placehold.jp）

[aboo]

liveAsNotes様、ありがとうございました！

教えていただいたThimbleに登録をし、コードをコピペしていたのですが
念のためにと思い最後にリセットＣＳＳも貼り付けたところ
リストの位置がずれたため、そこから原因を探る事ができ自己解決に至りました！

このフッターリスト、元々フロートを使って配置していたのを
過去質問のご回答からFlexboxを知りコードを書き換えたのですが
フロート時代の名残のclass(.cf)とリセットＣＳＳが反応してしまっていたみたいでした。

ＤＷ上でも余分なクラス名を外して位置を整えることが出来ました。
最後までご丁寧にお付き合いくださり本当にありがとうございました^^