(html,css)画面縮小すると左寄りになってしまうのを中央揃えにしたい

前提・実現したいこと

html、css入門のため、下記のサイトを真似しています。
ブラウザで縮小した際、元サイトでは中央揃えのまま縮小されるのですが、私が書いたコードでは左寄りで縮小されてしまいます。
どうすれば元サイトのように中央揃えのまま縮小されるのでしょうか。

https://www.hololive.tv/portfolio/items/336380

発生している問題・エラーメッセージ

画面を縮小すると左に寄ってしまう

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4    <head>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <title>赤井はあと</title>
8        <link rel="stylesheet" href="style.css">
9    </head>
10
11    <body>
12        <div>
13            <!-- 自己紹介 -->
14
15            <img class="inline-block"
16                src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_1000,w_500,f_auto,q_auto/1369026/970398_960056.png"
17                alt="はぁちゃま1">
18            <section class="inline-block">
19                <h1>赤井はあと</h1>
20                <p>赤井心 (bilibili) / Akai Haato
21                    <br>
22                    「こんるーじゅ！赤井はあとよ！」</p>
23                <br>
24                <p>生意気な後輩。普段はツンツンしているが仲良くなった相手には甘えたりする。赤いリボンとハートが好きで、髪や服によくつけている。</p>
25                <br>
26                <a href="https://www.youtube.com/channel/UC1CfXB_kRs3C-zaeTG3oGyg" class="btn-square">Youtube</a>
27            </section>
28            <!-- 本文 -->
29            <br>
30            <p>詳細情報</p>
31            <br>
32            <img src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1200,f_auto,q_60/1369026/790733_87219.gif"
33                alt="はぁちゃまgif">
34            <ul>
35                <li>デビュー日：2018年6月2日</li>
36                <li>誕生日：8月10日</li>
37                <li>身長：154cm</li>
38                <li>ファンネーム：はあとん</li>
39                <li>イラストレーター：はる雪</li>
40                <li>オススメシーン</li>
41                <li>①2019/11/15放送</li>
42                <li><iframe width="560" height="315" src="https://www.youtube.com/embed/zXzsdzFR4BA"
43                        frameborder="0"></iframe>
44                </li>
45                <li>②2018/06/16放送</li>
46                <li><iframe width="560" height="315" src="https://www.youtube.com/embed/NgR8XUVxe6w"
47                        frameborder="0"></iframe>
48                </li>
49                <li>③2019/11/19放送</li>
50                <li><iframe width="560" height="315" src="https://www.youtube.com/embed/Se00xsFoPfk"
51                        frameborder="0"></iframe>
52                </li>
53                <li><a href="https://twitter.com/akaihaato">Twitter</a>
54                    <a href="https://space.bilibili.com/339567211/">Bilibili</a></li>
55            </ul>
56            <img src="https://user-images.strikinglycdn.com/res/hrscywv4p/image/upload/c_limit,fl_lossy,h_9000,w_1200,f_auto,q_auto/1369026/277588_359286.png"
57                alt="はあちゃま2">
58
59
60
61
62        </div>
63
64    </body>
65
66</html>

css
1.inline-block {
2    display: inline-block;
3    vertical-align: top;
4    text-align: left;
5    width: 500px;
6}
7
8.btn-square {
9    display: block;
10    padding: 0.5em 1em;
11    text-decoration: none;
12    color: #ffffff;
13    background-color: rgba(0, 211, 248, 0.808);
14    border-radius: 50px;
15    font-weight: bold;
16    text-align: center;
17}
18
19.btn-square:hover {
20    background-color: aqua;
21}
22
23
24p , ul {
25 text-align: left;
26}
27.container{
28    margin: 0 auto;
29    width: calc(100% - 20px - 20px); /* 20pxは、左右の余白です。好きな値を設定してください */
30    max-width: 800px; /* 800pxは横幅の上限です。好きな値を設定してください */
31}
32img{
33    max-width: 100%;
34}

試したこと

margin、padding、text-align: center;で調整してみたのですが、縮小すると左寄りになってしまいます。

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

確認ブラウザ　Google Chromeバージョン: 83.0.4103.61（Official Build）

拡大率100％では中央揃えになるのですが、拡大率25％にすると左寄りになってしまうので、中央揃えになるようにしたいです。

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

回答1件

ベストアンサー

指摘する箇所を厳選すると、まずは以下の5点だと思います。
以下の5点だけで参考サイトを再現できるわけではないですが、致命的な間違いはとりあえずなくなると思います。

[1] とりあえずposition: absolute;は、今回の実装では不要なのですべて削除してください。

[2] まず現状のbodyの記述は不要なので、消してください。

CSS
1body {
2    /* 必要な記述がないのですべて消してください */
3    /*
4    margin-left: 25%;
5    margin-right: 25%;
6    width: 100%;
7    height: auto;
8    position: absolute;
9    */
10}

[3] divについての記述もすべて不要なので消してください。
その代わりに「.container」などのクラスを追加し、中央配置にしたり横幅の上限を指定

CSS
1/* divは汎用的すぎるので、.containerなど別クラスを用意したほうがいいです。 */
2div {
3    /* 文字が中央揃えになるだけなので不要 */
4    /* text-align: center; */
5    
6    /* 不要 */
7    /* position: absolute; */
8    
9    /* width: 100%; */
10}
11.container {
12    margin: 0 auto;
13    width: calc(100% - 20px - 20px); /* 20pxは、左右の余白です。好きな値を設定してください */
14    max-width: 800px; /* 800pxは横幅の上限です。好きな値を設定してください */
15}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4    <!-- 説明のため<head>の記述は省略 -->
5
6    <body>
7        <div class="container"><!-- HTML側で「container」クラスを追加 -->
8            <!-- 自己紹介 -->

[4] 画像や動画がはみ出ないようにする + 中央配置

CSS
1img,
2iframe {
3    max-width: 100%; /* 画像がはみ出ないようにする (=画像の横幅が親要素の横幅を上回らないようにする) */
4    
5    /* 以下は、中央配置するための記述です。最終的にはそれぞれの箇所に汎用的なクラス名をつける、などして指定してください。 */
6    margin-left: auto;
7    margin-right: auto;
8    display: block;
9}

[5] とりあえずすべての「<ul>と</ul>を「<p>と</p>」にする
<ul>を使う場合は子要素に必ず<li>が必要です。理解できなければ、とりあえず<ul>を<p>に置換してください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

投稿2020/05/26 13:16

編集2020/05/26 13:35

new1ro

総合スコア4528

uso

2020/05/26 14:01

ご回答、コードレビューをしていただきありがとうございます。ご指摘点をすべて修正したのですが、解決には至りませんでした。補足情報にスクリーンショットを添付いたしました。縮小表示でも画面の中央に表示をしたい場合、どのように修正をしたらよいのでしょうか。大変恐縮ですが、ご存知でしたらご教示頂けますと幸いです。