セレクタの幅を調整したい

上記の画像
・緑色の部分の長さを短く調整したいです。
・英語で書かれている文章を中央寄せしたいです。

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>TOP</title> <style> .header{ text-align: left;} h1{ background-color: #336600; color: white; padding: 20px 0px 20px 0; width: 220px; height: 20px; margin: auto; font-size: 15px; font-weight: lighter; text-align: center; } p{ font-size: 13px; padding-right: 300px; padding-left: 400px; text-align: left } .wifi{ text-align: center; } .main{ background-color: #99CC00; color: white; font-size: 13px; margin-left: auto; margin-right: auto; } .header{ padding-left: 265px; } li{ display: inline; list-style-type: none; font-size: 10px; border-left: 5px; text-align: center; } .under{ font-size: 13px; margin: auto; text-align: center;} .footer{ font-size: 13px; text-align: center; } .info{ text-align: right; } ul{ text-align: center; } </style> </head> <body> <div class="header"> <img src="Wi2_PC_Logo.png"> </div> <div class="wifi"> <img src="Wi2_PC_Banner.png"> </div> <h1>インターネットに接続</h1> <p>次ページのご利用規約に同意なさることで、フリーWi-Fiをご利用いただけます。</p> <div class="main"> <p>ご利用いただくWi-Fiネットワークの通信は、暗号化されておらず通信を傍受されるおそれがあります。 <br>あらかじめご了承の上でご利用くださいますよう、お願いいたします。</p> </div> <p>スターバックスコーヒージャパン株式会社のご協力のもとワイヤ・アンド・ワイヤレスがサービス提供を行っております。</p> <hr color="gray" width="750" height="thin" > <ul> <li>問い合わせ</li> <li>プライバシーポリシー</li> <li>運営会社</li> </ul> <div class="info"> <p>Copyright © WIRE AND WIRELESS All rights reserved.</p> </div> </body> </html>

kei344

2019/09/08 03:51

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

m.ts10806

2019/09/08 04:03 編集

CSSフレームワークを使われている様子がないのでタグは不要かと。shもどう関係するのでしょうか

m.ts10806

2019/09/08 04:00

あと、この文章の書き方だと作業依頼になっています。「質問するときのヒント」を一読し、質問にしてください

H40831

2019/09/08 05:02

まず、あなたが何を調べて、その結果何がわからなかったのか教えて下さい。

yoshinavi

2019/09/08 13:47 編集

新しく質問されたのであれば、前回質問分は早急に修正してください。このようなサイトの特性のひとつに、過去質問の検索は、重要な要素のひとつです。質問と回答の整合をお願いいたします。

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

回答1件

jQuery使います。

jQuery
1$(function() {
2  var width1 = $('.header img').outerWidth() - 32;
3  var width2 = $('body').outerWidth();
4  var width3 = $('.header img').outerWidth();
5  $('.main').css('width',width1);
6  $('.main').css('margin-left',(width2-width3)/2+32);
7});