レスポンシブデザインで横幅を画面いっぱいにしたい

前提・実現したいこと

レスポンシブデザインにしたいのですがwidthを100%に設定しているのに幅を狭めると一部しか表示されずスクロールしないと見れません。スマホとかの画面幅にしてもスクロールせずに全体が見れるようにしたいです。
また、右側の空白が画面幅を狭めたときになくなるのを防ぎ、常に両端に空白があるようにしたいです。（700px以下では空白をなくすのでそれ以上の横幅の時です）

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>write</title>
6    <link rel="stylesheet" href="css/write.css">
7    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9    <!-- <meta name="viewport" content="width=device-width"> -->
10    <meta name="viewport" content="width=device-width, initial-scale=1">
11  </head>
12  <body>
13    <header>
14      <div class="header-ttl">
15        <h1>Write</h1>
16        <p>書くためのテーマ</p>
17        <!-- <button type="button" id="button">asd</button> -->
18      </div>
19      <div class="header-list">
20        <ul class="ddmenu">
21          <!-- サブメニューは</li>の場所注意 -->
22          <li class="list-a"><a href="#">ホーム ↓</a>
23            <ul>
24              <li class="b"><a href="#">→カスタマイズ</a></li>
25            </ul>
26            </li>
27          <li class="list-a b"><a href="#">ページ　↓</a>
28            <ul>
29              <li><a href="#">アイキャッチ画像無し<br>のページ</a></li>
30              <li><a href="#">ページ（全幅テンプレー<br>ト）</a></li>
31            </ul>
32            </li>
33          <li class="list-a b"><a href="#">タイポグラフィー</a></li>
34          <li class="list-a b"><a href="#">お問い合わせ</a></li>
35          <li class="list-a">
36            <i class="fas fa-search fa-lg"></i>
37          <input type="text" name="asdf" value="検索..">
38          <!-- <div class="hamberger">
39            <p>p</p>
40          </div> -->
41
42          </li>
43          <li><span class="ham">ad</span></li>
44        </ul>
45      </div>
46
47    </header>
48    <div class="top-img">
49      <img src="img/cropped-nicole-honeywill-730102-unsplash.jpg" alt="眼鏡">
50    </div>
51
52    ～略～
53
54    
55  </body>
56</html>
57

CSS
1html {
2  width:100%;
3  height:100%;
4}
5body {
6  width:70%;
7  height:100%;
8  margin:0 auto;
9  font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
10  display: block;
11}
12p {
13  color:#777777;
14}
15header {
16  display: flex;
17  justify-content: space-between;
18  align-items: flex-end;
19  height:15%;
20}
21header .header-list {
22  /* align-items: flex-end; */
23}
24
25.top-img {
26  margin-top: 80px;
27  margin-bottom: 90px;
28  display: block;
29  /* object-fit: cover; */
30  width:100%;
31  /* z-index: 0; */
32}
33
34～略～
35
36@media screen and (max-width:750px) {
37  body {
38    /* width:100%; */
39    
40
41  }
42  .header-list {
43    display:none;
44  }
45  /* .top-img {
46    display:none;
47  } */
48  
49}
50

試したこと

@mediaのところでbodyのwidthを100%にすると画面いっぱいに表示されスクロールが必要なくなるかと思ったのですがなりません。
html要素100％に対しbody要素を70％とすることで常に空白が生まれると思ったのですが右端はなくなります。

補足情報（FW/ツールのバージョンなど）

Windows１０
atom使用

Lhankor_Mhy

2020/05/20 02:21

ご提示のコードを試してみましたが、スクロールバーが出なかったので、「@mediaのところでbodyのwidthを100%にすると画面いっぱいに表示されスクロールが必要なくなるかと思ったのですがなりません。」という問題が発生しませんでした。 https://jsfiddle.net/Lhankor_Mhy/u2k3aywv/ https://jsfiddle.net/Lhankor_Mhy/u2k3aywv/1/