フッターメニューに リスト項目を追加するとレイアウトが崩れてしまう

Question

フッターメニューに　’コラム’という項目を追加しようとして

html に書き込んだところレイアウト崩れが起きてしまいました。

フッターのリスト全体を囲っている幅が原因だとおもい,

フッターメニューの　.footer_menu　の幅をふやしてみましたが、追加したコラムという項目見切れてみえなくなってしまいました。

どうやればバランス良く設置できるでしょうか？

このようにしたいのですが、

このようになってしまいます。

下記がテストサイトです。

リンク内容

フッターのhtml ソース

<!--▼▼ footer ▼▼-->
<div class="keni-footer_wrap">
	<div class="keni-footer_outer">
		<footer class="keni-footer">

			<div class="keni-footer_inner">
				<div class="keni-footer-cont_wrap">

        <div class="footer_menu">
			<div class="flex">
			<div class="footer_L">
				<ul>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページ</a></li>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>flow/">ご依頼からの流れ</a></li>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>faq/">よくある質問</a></li>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>courpon/"> WEB 割引について</a></li>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>company/">会社概要</a></li>
				</ul>
			</div>
			<div class="footer_R">
		        <p class="footer_title">作業内容と料金案内</p>
				<ul>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>price1/">トイレのつまりや水漏れ修理</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>price2/">キッチンつまりや水漏れ修理</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">洗面所のつまりや水漏れ修理</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">お風呂のつまりや水漏れ修理</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>price5/">蛇口やシャワーの水漏れ修理・交換</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">各所排水つまりや排水管洗浄作業</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">流し台・洗面台・便器の修理・交換</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">漏水調査・給排水設備の水道工事</a></li>
				</ul>
			</div>
				<div class="footer_R">
		        <p class="footer_title"> お役立ちコラム</p>
				<ul>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>column/"> コラムサイトURL</a></li>
					
				</ul>
			</div>
				
			</div>
			<div class="footer_C">
				<ul>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>company/#privacy">特定商取引法に基づく表記</a></li>
				</ul>
			</div>
        </div>

        <div class="footer_menu_s">
				<ul>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページ</a></li>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>faq/">よくある質問</a></li>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>company/">会社概要</a></li>
				</ul>

				<ul>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>flow/">ご依頼からの流れ</a></li>
		        <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>courpon/">WEB割引きについて</a></li>
		        <li><a class="js-menu_link" href="">作業内容と料金案内</a>
					<ul class="submenu">
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>price1/">トイレのつまりや水漏れ修理</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>price2/">キッチンつまりや水漏れ修理</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">洗面所のつまりや水漏れ修理</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">お風呂のつまりや水漏れ修理</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>price5/">蛇口やシャワーの水漏れ修理・交換</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">各所排水つまりや排水管洗浄作業</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">流し台・洗面台・便器の修理・交換</a></li>
					 <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>#">漏水調査・給排水設備の水道工事</a></li>
					</ul>
					 
				</li>
				</ul>
			
		       
		       
				
		        <p class="footer_link"><a href="<?php echo esc_url( home_url( '/' ) ); ?>company/#privacy">特定商取引法に基づく表記</a></p>
        </div>




				</div><!--keni-section_wrap-->
			</div><!--keni-footer_inner-->
		</footer><!--keni-footer-->
	</div><!--keni-footer_outer-->
</div><!--keni-footer_wrap-->

フッターのCSSソース

.footer_menu {
    display: block;
}

.footer_menu {
    width: 100%;
    padding: 10px 0;
    margin-left: 0;
    display: none;
}
div {
    word-wrap: break-word;
}
*, ::after, ::before {
    background-repeat: no-repeat;
    box-sizing: inherit;
}
*, ::after, ::before {
    background-repeat: no-repeat;
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
ユーザー エージェント スタイルシート
div {
    display: block;
}
.keni-footer_wrap {
    border-top: 3px solid #172d81;
    background: #172d81;
    font-size: 1.4rem;
    line-height: 1.8em;
}
body {
    color: #000000;
}

追記

footer_menu 100%
footer_L 33%
.footer_R 66%;
をいじってみましたが、　まだうまく出来ません。
普通に追加しても　高さが一番上の高さに合わないですし。

Answer 1

こうゆうことでしょうか。

<div class="footer_column">
  <p class="footer_title">コラム</p>
  <ul>
    <li><a href="#">コラム</a></li>
  </ul>
</div>

Comments

[niconic73027793]

そうです。
今ソースを見直してたら修正出来たかもです。

Answer 2

/FOOTER/
.footer_menu{width:100%; padding:10px 0; margin-left:0; display:none;}
.footer_L{ width:23%;}
.footer_R{ width:63%;}
.footer_column{ width:auto;}

フッターの幅を調整したら出来ました。