グローバルナビをレスポンシブでも比率を保ったまま綺麗に表示させたい。

Question

前提・実現したいこと

レスポンシブサイトで画面を小さくしてもメニューが右端に寄ったまま画面サイズにおさまって欲しい。
画面を小さくさせてもいいようにリストの部分で　padding-left:70%;としてみたのですが、全く右に行かず、padding-leftが効かないです。
なのでロゴのすぐ横にくっついた形になってしまいます。

ロゴのサイズは幅91px　高さ27pxです。

該当のソースコード

HTML

<header class="menubox">
<menu>
	<div><a href=""><img src="http://www.test.png></a></div>
<ul class="menu-ul">
	<li class="menu-li1"><a href="" class="a1">HOME</a></li>
	<li class="menu-li2"><a href="" class="a2">TEST1</a></li>
	<li class="menu-li3"><a href="" class="a3">TEST2</a></li>
	<li class="menu-li4"><a href="" class="a4">TEST3</a></li>
	<li class="menu-li5"><a href="" class="a5">TEST4</a></li>
	</ul>
	</menu>

</header>

header {

		margin:0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    　justify-content: center;
     align-items: center;
		margin-top:5px;
				padding-bottom:5px;
				width:100%;
	}
	
	menu {
		display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    　justify-content: center;
     align-items: center;
		background:#fff;
	}
	
	.menu-ul {
	 display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
　　　　　　padding-left:70%;

}

menu .a1,.a2,.a3,.a4 {
	display:block;
	width:104px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	text-decoration:none;
	color:#725b3c;
	
}
	
menu .a5 {
	display:block;
	width:105px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
	text-decoration:none;
	color:#725b3c;
	
}
	
	menu .menu-li1,.menu-li2,.menu-li3,.menu-li4 {
		border-right:solid 1px #725b3c;
	}
	
	menu ul a:hover {
		background:rgba(248,239,208,0.75);
	}

Answer 1

padding-left:70%;としてみたのですが、全く左に行かず

padding-left は「左側の余白」という意味です。
左側に余白ができるので、通常は右に行ってしまいます。

---

レスポンシブサイトで画面を小さくしてもメニューが左端に寄ったまま画面サイズにおさまって欲しい

menu .a1,.a2,.a3,.a4 {
    display:block;
    width:104px;
/* ... */

となっていますから、メニューひとつのサイズは、最低でも104pxあります。
メニュー5個とロゴ画像91pxで104 * 5 + 91 = 611pxですから、横幅400px程度のモバイルデバイスには、どう頑張っても物理的に納まりません。

レイアウトを見直しましょう。

Comments

[退会済みユーザー]

たとえば１０２４のタブレットだったらどうでしょうか？
説明足りずに申し訳ないですがスマホサイズなら見直そうと思っています。
あと左にいくのではなく右にいってほしいの間違いでしたすいません。修正します。

[Lhankor_Mhy]

ロゴとメニューを両端に置きたいということであれば、justify-content: space-between を検討してはどうでしょうか。