最大幅pxを設定した時の余白paddingの扱いについて

画像のように、最大幅1035pxで右ヘッダー260px（余白75px）、左ヘッダー（メニューになる部分)を700pxで指定、
画面サイズを1035px以下に縮小した時に両脇に4%程度の余白が出るようにしたいです。

それぞれwidthをpx指定すると、余白の4%のpadding分レイアウトがはみ出してしまいます。
どうすれば綺麗に表示されるでしょうか。
よろしくお願いいたします。

html
1<!doctype html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>●●●</title>
6        <meta name="viewport" content="width=device-width,initial-scale=1">
7        <link rel="stylesheet" href="●●.css">
8    </head>
9    <body>
10        <!-- header -->
11        <header>
12            <div class="header-left">
13                要素省略
14            </div>
15            <div class="header-right">
16           　　要素省略
17            </div>
18        </header>

css
1@charset: utf-8;
2
3* {
4    box-sizing: border-box;
5}
6
7html{
8    font-size: 100%;
9}
10
11body{
12    font-family: Georgia, "游明朝", yuMincho, "Hiragino Mincho ProN", Meriyo, serif;
13    max-width: 1035px;
14    margin: 0 auto;
15}
16
17header{
18    display: flex;
19    justify-content: space-between;
20    
21}
22
23.header-left{
24    width: 335px;
25    padding-right: 75px;
26    height: 72px;
27    margin-bottom: 10px;
28    flex-shrink: 0;
29}
30
31.header-right{
32    width: 700px;
33    display: flex;
34    justify-content: space-between;
35    align-items: flex-end;
36    height: 82px;
37    flex-shrink: 0;
38    background-color: aquamarine;
39}
40
41
42

miyabi_pudding

2020/07/06 10:52

質問タグのFlexは、CSSのそれとは別物なので、外した方がいいかと。

incco

2020/07/06 10:59

削除しました。ご指摘ありがとうございます。

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

回答1件

ベストアンサー

ご質問の画像ではheaderから記事まで
同じように左右4%の余白をとりたいようですね

一番簡単にやるのでしたら

<body>以下のコンテンツを全て <div class="wrap">で囲います

html
1<body>
2<div class="wrap"><!-- ←これを追加 -->
3
4ここに、現在の要素
5<header>
6～
7～
8</footer>
9を全て入れます
10
11</div><!-- ←これを追加 -->
12</body>

以下のようにcssを修正

css
1body{
2    font-family: Georgia, "游明朝", yuMincho, "Hiragino Mincho ProN", Meriyo, serif;
3    margin: 0; /*変更*/
4    text-align: center; /*追加*/
5/* 削除  max-width: 1035px; */
6}
7
8/* wrapで幅を設定 */
9.wrap {
10    width: 92%; /* 左右に4%の余白が出るように */ 
11    max-width: 1035px;  /* 最大幅を設定 */ 
12    margin: 0 auto; 
13}
14
15以下略