バックグランドデザインは画面合わせて横幅は広げてその他の要素は960pxに収めたい

初心者質問で申し訳ありません。
今まではbodyタグでwidthを固定してサイトを構築していたのですが、navやmainは960px以内にするにはbodyの指定はなしでnavやmainに指定すればいいんでしょうか？
hrで試してみたのですがうまくいかないので大変恐縮ですがご助言いただけると助かります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="description" content="">
6<link href="reset.css" rel="stylesheet" type="text/css" madia="screen">
7<link href="style.css" rel="stylesheet" type="text/css" madia="screen">
8</head>
9<body>
10	<header  class="top">
11	<hr class="line">
12
13</header><!-- /header -->
14</body>
15</html>

CSS
1@charset "utf-8";
2
3.line{
4border:1px solid #ff0000;
5height:10px;
6margin-top: 0;
7width:0 auto;
8}

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

回答2件

こんばんは。
初めての解答投稿となりますので、至らない点あるかもしれませんが、分かりそうだったので投稿させてください。
（分かりにくいところあればコメントください。）

恐らく、一番スタンダードで簡単な方法を紹介します。

まずhtml側は、

<body>
  <div class="wrapper">
    <header  class="top">
      <hr class="line">
    </header><!-- /header -->
  </div>
</body>

という風に
全ての要素を

<div class="wrapper"> ～ </div> で囲います

そしてcssは

  .wrapper {
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
  }

とすれば、
body以外の全ての要素がセンタリングされるはずです。
max-width: 100%;
の記述は無くても良いのですが、
今風のレスポンシブサイトにするのであれば、入れておくとたぶん都合が良いかと思います。

投稿2021/02/15 19:40

nanigasi

総合スコア20

let

2021/02/15 19:59

グローバルナビゲーションのバックグランドカラーなど設定した際もdivで囲って設定していけばいいんでしょうか？ bodyのmax-widthなどの設定も不要でしょうか？

nanigasi

2021/02/15 21:17

>グローバルナビゲーションのバックグランドカラーなど設定した際もdivで囲って設定していけばいいんでしょうか？この場合は恐らく <header class="top"> <div class="wrapper"> <hr class="line"> </div> </header> <div class="global-nav"> <div class="wrapper"> ～～ </div> </div> のように、wrapperを細かく入れ込んでいけば解決するかと思います >bodyのmax-widthなどの設定も不要でしょうか？こちらは不要ですね！ bodyに関しては一切のwidth系の指定が不要です

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