li(リストメニュー)をmedia queryでスマホ表示用CSSを書くが画面幅いっぱいに出来ない

Question

サンタと申します。
いつもお世話になっております。

作成中のサイト
http://carshop-glanz.com/
PC用サイトとスマホ用サイトを同時に作っております。（レスポンシブのつもりですが、、）
@media query
を使用して、スマホ用サイトにだけ適応するCSSを書いているのですが、思い通りのデザインになりません。
イメージとしましては、、長方形の（画面いっぱい100％もしくは95％程度）フラットなボタンを並べるだけなのですが、どうにも上手く行きません。

PC用にはボタンをCSSだけで作っていますので、そのpadding,marginをいじってみますが、出来ませんでした。
@media screen and (max-width:721px){
としておりますので、
padding:0px;
padding-left:360px;
padding-right:360px;
のようにしても出来ませんでした。

li,aにどのような記述にしましたら、画像にありますように出来ますでしょうか？
よろしくお願い致します。
失礼致します。

ORUKA1951 · Accepted Answer

＞wapper,main_contentsの2個のみです。

　代表的な無駄なデザインのためだけのdivですね。素人さんのサイトや、あるツールで製作されたサイトで良く見かけます。
｛Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )｝←とっても重要。

　header,section,footerから構成されると期待される一塊のブロックはarticleです。wrapperとかcontenerとかじゃありません。どう考えても文書構造を示す物じゃない。
　全体をarticleで囲うという手もありますが、おかしいです。なぜなら、body要素がまさに「header,section,footerから構成され」ているのですからね。ですから、それらがワンセットしかないときはbodyがあるので不要なはずです。
body{margin:10%;background-color:red;position:relative;}
header,section,footer{width:80%;margin:0 auto;border:solid:orange 2px;}

　articleを使用するとなると
<body>
　<header></header>
　<section>
　　<article>
　　　<header></header>
　　　<section></section>
　　　<footer></footer>
　　</article>
とか・・・

mainは特殊で、詳しくは
4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/gro … )
　その意味から、文書内に一箇所しか使えませんし、article, aside, footer, header, nav要素内には置けません。もちろん、文書のアウトラインにも影響しない。
<body>
　<header></header>
　<section>
　　<section>
　　　<article></article>
　　</section>
　　<section>
　　　<main>
　　　　ここにこの文書の最も重要なメインテーマ
　　　</main>
とか。

wrapper → <body>もしく不用
main_content → <section>

とか・・・ mainは特殊で、詳しくは 4.4 Grouping content — HTML5( http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-main-element ) 　その意味から、文書内に一箇所しか使えませんし、article, aside, footer, header, nav要素内には置けません。もちろん、文書のアウトラインにも影響しない。　

　　　　ここにこの文書の最も重要なメインテーマ　　　

とか。 wrapper → もしく不用 main_content →

ORUKA1951 · Answer

＿

＿＿

Your title

＿＿＿

とすると・・・・HTMLは、とにかく無駄な事は書かない。シンプルイズザベスト!! そうすると、好きにデザインできる。デザイン目的でHTMLに余計な事書くから、様々なユーザーエージェントに対応できなくなるのですよ。 html,body{margin:0;padding:0;line-height:1.6em;} h1,h2,h3,p,ol{margin:0;} header nav ol,header li,header nav ul{ margin:0;padding:0;line-height:2em; } header nav li{position:relative;width:100%;border:solid 1px silver;} header nav li a{display:block;text-decoration:none;width:100%;height:100%;} header nav ol li ul li a{background-color:gray;white-space:pre;} header nav ol li ul{display:none;} header nav ol li ul:target{display:block;} header nav li a{background-color:rgb(220,220,220);color:blue;text-decoration:none;} header nav li a:before{content:" ▼ ";white-space:pre;} header nav li li a:after{content:"＞ ";position:absolute;right:0;white-space:pre;} header nav li li a:before{content:" ";white-space:pre;} ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) はHTML4.01ですが、余計なこと書いてないから、デザインの自由度が上がる。そしてメンテナンスも楽になる。　↑表示→スタイルと進んでスタイルシートを選択する。

li(リストメニュー)をmedia queryでスマホ表示用CSSを書くが画面幅いっぱいに出来ない

<body>

＞wapper,main_contentsの2個のみです。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング