スマホで表示したときに二列目の左右に隙間ができてしまいます。
どうしてでしょうか。
html
1!doctype html> 2<html> 3<head> 4<meta name="msvalidate.01" content="05750DC7F0199B7F83D0C41AB8472521" /> 5<meta charset="UTF-8"> 6<!--スマホ用設定--> 7<!-- ビューポートの設定 --> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9<link rel="stylesheet" href="css/responsive_style.css" media="all"> 10<script src="java/jquery-3.2.1.min.js"></script> 11<script src="java/script.js"></script> 12</head> 13<body> 14<div class="wrapper"> 15<div class="newmenu"> 16 <ul id="global"> 17 <li><a href="index.html">AAAAA</a></li> 18 <li>BBBBBB 19 <ul id="tisiki"> 20 <li><a href="studying.html">AAAAAAA</a></li> 21 <li><a href="matome.html">AAAAAAA</a></li> 22 <li><a href="friends.html">AAAAAAA</a></li> 23 <li><a href="books.html">AAAAAAAA</a></li> 24 <li><a href="colleges.html">AAAAAAAA</a></li> 25 <li><a href="failure.html">AAAAAAA</a></li> 26 </ul> 27 </li> 28 <li>CCCCCCC 29 <ul id="tequnic"> 30 <li><a href="test.html">BBBBBB</a></li> 31 <li><a href="schedule.html">BBBBBBB</a></li> 32 <li><a href="motivation.html">BBBBBBB</a></li> 33 <li><a href="colleges7.html">BBBBBBB</a></li> 34 <li><a href="memory.html">BBBBBB</a></li> 35 </ul> 36 </li> 37 <li>DDDDDD 38 <ul id="info"> 39 <li><a href="playing.html">CCCCCCC</a></li> 40 </ul> 41 </li> 42 </ul> 43</div><!--newmenuここまで--> 44<div><!--wrapperここまで--> 45</body>
css
1.newmenu{ 2 padding:0 0 0 0 ; 3 margin:0 0 0 0; 4 font-size:0; 5} 6.newmenu ul li{ 7 list-style-type:none; 8 text-align:center; 9 float:left; 10 width:50%; 11 font-size:12px; 12 padding:0 0 0 0; 13 margin:0 0 0 0; 14 color:#ffffff; 15 background-color:#191970; 16} 17.newmenu ul li a{ 18 color:#ffffff; 19 text-decoration:none; 20 display:block; 21 padding:0 0 0 0 ; 22 margin:0 0 0 0; 23 box-sizing:border-box; 24} 25
java
1$(function() { 2 init_menu(); 3}); 4 5function init_menu(){ 6 7 $('#global> li').hover( 8 function(){ 9 $(this).find('ul').slideDown(200); 10 }, 11 function(){ 12 $(this).find('ul').hide(); 13 } 14 );} 15
スマホ用のCSSの記述などは無いのでしょうか。