レスポンシブ対応デザイン,ハンバーガーメニューについて

ハンバーガーメニューを作ろうとしていてulで指定したメニューの部分を580px以下の場合width:100%;で横幅いっぱいに表示させて、後々jquery使って制御していきたいと思っていますがそうなりません。positionのablosolute,relative当たりが怪しいと思っているのですが理由がわかりません。

また「実務ではbootstrapしか使わないから、bootstrap使って練習したほうがいいよ」などwebデザイン全般のアドバイスももしあれば頂きたいです、よろしくおねがいします。

htmlファイル（ヘッダー部分のみ）
<!DOCTYPE html>
<head>
<meata lang="ja">
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<body>
<header>
	<div class="title">TITLE</div>
	<ul>
		<a href="#"><li>Home</li></a>
		<a href="#"><li>What is it?</a></li></a>
		<a href="#"><li>Contact</li></a>
		<a href="#"><li>blog</li></a>
	</ul>		
</header>	
</body>	

CSSファイル（design.css)
body{
	padding:0;
	margin:0;
}
header{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:4em;
	background-color: #F5A9A9;
}
.title{
	font-size: 25px;
	color:#DF0174;
	position:absolute;
	top: 0;
	left: 5%;
	bottom: 0;
	margin: auto;
	width: 100%;
	height:50%;
}
header ul{
	position:absolute;
	top:0;
	bottom:0;
	right:5%;
	vertical-align: middle; 
	display:table;
	margin:auto;
}
header li{
	border-right:solid white 0.5px;
	color:white;;
	display:table-cell;
	padding-right:10px;
	padding-left: 10px;
	font-size: 20px;
	font-family: arial black;
	cursor:pointer;
}
a{
	text-decoration: none;
	color:inherit; 
}
@media screen and (max-width:580px){
	header ul li{
		box-sizing:border-box;
		width:100%; /*横幅いっぱいにならない！！*/
		padding:15px;
	}
}

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

回答2件

ベストアンサー

HTMLが文法的におかしいです。ul要素はli要素以外を直下に持ちません。

HTML
1<header>
2    <div class="title">TITLE</div>
3    <ul>
4        <li><a href="#">Home</a></li>
5        <li><a href="#">What is it?</a></li>
6        <li><a href="#">Contact</a></li>
7        <li><a href="#">blog</a></li>
8    </ul>
9</header>

CSS
1@media screen and (max-width:580px){
2    header ul {
3        display: block; /* 追加（しなくても影響はあまり無いが内容的にこうする） */
4        width: 100%; /* 追加。「100%」は直近の親要素を基準にするのでこれがないとli要素が画面幅いっぱいにならない */
5    }
6    header ul li{
7        box-sizing:border-box;
8        width:100%;
9        padding:15px;
10        display: block; /* 追加 */
11    }
12}
13```**動くサンプル：**[https://jsfiddle.net/agajsoov/](https://jsfiddle.net/agajsoov/)