CSSが期待通りに動きません

質問をお開きいただきありがとうございます。
現在、某ユーチューバーさんのnoteにて無料公開されている教材の入門編を
模写していますが、cssが思い通りに機能しません。
・下記に質問を記載し、その下に具体的な質問内容と症状を記載させていただきます。

そこで質問なのですが、cssコードを書く際に文字化け防止の他に何か共有の設定などは打ち込むのでしょうか？

現在模写コーディング中です。
配布されているテキストが【XD】のものなので、それをみながらコードを書いています。
ただ、XDのテキスト情報を見ながらコードを書いていても、実際に反映される時ウェブ上では常に画面の左側にずれて表示されてしまいます、、、

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

○私のやりたいこと。

<main> <div class="copy-container"> <h1>Feature</h1> <h2>Feature</h2>

上記h1タグの中にある【Feature】と言う文字をメイン画像の下中央に表示させたいのですが、cssを使っても中央に寄りません。
【Feature】の文字以外にも、
ulタグの【home,about,contact】の文字も表示させる際にXDのテキスト情報を入力しましたが、かなり左側にずれていた為、テキスト情報ではなく、自分の匙加減で調節をしてしまいました。

尚、h1ひとつだけの記載だとウェブ上に【Feature】の文字が表示されず、h2にも試しに【Feature】の文字を入れたところ表示されたので形的にはおかしなことになっていますが、h1,h2のふたつをコードに書き込んでいる状態です。

文章わかりにくく誠に申し訳ございません。

お答え頂けますと幸いです。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
追加記載させていただきます。

私の書いたコードは下記のものになります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>LOGO</title>

        <!-- CSS -->

            <link rel="stylesheet" href="css/styl.css">

    </head>

    <body>
        <header>
            <h1>
                <a href="/">LOGO</a>
            </h1>
            <nav class="pc-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contant</a></li>
                    
                </ul>
            </nav>
        </header>

        <main>
            <div class="copy-container">
                <h1>Feature</h1>
                <h2>Feature</h2>
            </div>


        </main>


        <footer>
            
            
        </footer>
        
    </body>
</html>

@charset "UFT-8";

/*共有部分
-------------------*/
 

 header {
    width: 100%;
    height: 80px;
    top: 0px;
    left: 0px;
    background-color: #58A9EF;
    position: fixed;
    display: flex;
    align-items: center;
}

h1 {
    margin: 0; 
    font-size: 28px;
    color: #FFFFFF;
    padding-left: 207px;
    padding-top: 26px;
    padding-bottom: 23px;
 }
 a {	
    text-decoration: none;
    color: #FFFFFF;
 }
 ul {
    list-style: none;
    margin: 0;
    display: flex;
    padding-right: 203px;
    padding-top: 31px;
    padding-bottom: 27px;
 }
 li {
    margin: 0 0 0 15px;
    font-size: 20px;
 }
 nav {
    margin: 0 0 0 auto;
 }
 main {
     background-image: url(../images/component.png);
     top: 80px;
    left: 0px;
    width: 100%;
    height: 603px;
 }
 .copy-container h2{
     padding-left: 625px;
     padding-right:  625px;
     padding-top: 500px;
 }

お恥ずかしいことながらかなりの無知のため、自分自身、何がわからないのかも不明な状態になってきてしまいました。。。
なので、もし何か共有設定などで間違っている部分がありましたらご教授いただけますと幸いです。
皆様と同様の共有設定を私がコードに書きこめているのだとしたら、今起っている文字のずれは私自身の勉強不足だと思うので後は自分で調べてみます。。

m.ts10806

2021/04/05 08:53

ご自身が書かれたコードを提示してください。現状だと推測するにも材料が皆無です。

m.ts10806

2021/04/05 08:55

どのようなコードを書いてどのような問題が起きているかをかかれないことには「具体的」とは言えません。現象再現できませんから。すべて反映されないのか、反映されているものもあるのか、それは何なのかなど

K_3578

2021/04/05 08:57

共有の設定、というかブラウザによるデフォルト値をリセットする目的でリセットcssとかを用意するのは普通のことだけど、とりあえず質問者の問題に関してはソースコードないと回答者ってエスパーじゃないんで何がおかしいか分からないのでとりあえず貼って頂ければと。 ※ソースコードはMarkDownの<code>ブロック内(「```」で囲む)に貼り付けて提示してください。

Lhankor_Mhy

2021/04/05 09:03

「タイトルのwidthを５０％で書き込んでみても画面中央に反映されることはなく、少し左側に反映されてしまいます」とのことですが、それが普通のように思えます。通常、widthを設定しただけではセンタリングされないです。

K_3578

2021/04/05 09:09

そもそもタイトルってのがtitleタグなのか文章内のタイトルに設定したものなのかもよく分からんし、当てずっぽうで当てるしかないですね

XiPhone

2021/04/06 06:09

Lhankor_Mhyさん、K_3578さんお返事遅れてしまい大変申し訳ございません。ソースコードを編集欄に記載させていただきます。

K_3578

2021/04/06 06:30

少なくとも追記頂いたコード内に width:50%としているものがありませんがタイトル、とはどれのことですか？

Lhankor_Mhy

2021/04/06 06:32 編集

コードを拝見しましたが、「widthを５０％」とした箇所を確認することができませんでした。 header { width: 100%; これを50%に変更した、ということですか？

XiPhone

2021/04/06 06:44

話をややこしくしてしまい申し訳ございません。自分の中で質問箇所がわかりましたので、再度投稿に質問内容を書きなおせていただきます。

K_3578

2021/04/06 07:21

@charset "UFT-8"; ↑ @charset "UTF-8"; ではないでしょうか？

XiPhone

2021/04/06 07:26

@charset "UFT-8"; ↑ @charset "UTF-8"; ではないでしょうか？ ↓ ありがとうございます。いただいたものをコピーし、自分のものを一度削除し貼り付けたのですが、変わらずでした、、

K_3578

2021/04/06 07:30

あいや、@charset "UTF-8";　は、あくまで文字化け対策にUTF-8という文字コードを使いますという宣言なので。今回の件とは無関係ですが、UFT-8なんていう文字コードが存在しないので間違えないようにして頂けると。

XiPhone

2021/04/06 07:36 編集

そうでした、、ありがとうございます。ちなみに、回答者様のお答えで main { text-align: center;　 } を記入したところ正常に真ん中に表示させることができました！ただ、<h1>Feature</h1>←こちらのh1タグのみだとウェブ上にFeatureの文字が表示されないのは何故でしょうか、、？お分かりになりますでしょうか、、質問ばかりで申し訳ございません。

K_3578

2021/04/06 07:37

まぁ、とりあえずここは追記修正依頼欄なので私の回答のコメントにぶら下げて貰えると。

XiPhone

2021/04/06 07:38

使い方不備で申し訳ございません、、回答にコメントさせていただきます。

Lhankor_Mhy

2021/04/06 07:43

うーん、カンプを見ていないですし、XDについてはよくわからないのでなんと言っていいのかわからないですが。 XDのカンプを見て、Feature の x が 625px だったとして、真正直に余白を625pxとしてはダメだろうと思いますよ。テキストボックスをページ幅で配置してテキストを中央寄せ、みたいな親切なカンプになっていればコーダーも楽でしょうけれど、そうとは限らないので、デザイナの意図を読み取るべきではないでしょうか。

XiPhone

2021/04/06 07:46

カンプのままコードを書いてもうまくいかない場合もあるのですね、、、あろがとうございます！XDのカンプが絶対に正しいと持っていたのでとても勉強になりました。

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

回答3件

ベストアンサー

因みに
widthは要素の幅を設定するプロパティです。
width - CSS: カスケーディングスタイルシート | MDN

センタリングするなら下記とかですかね。

css
1main {
2    text-align: center;　
3}

text-align - CSS: カスケーディングスタイルシート | MDN

投稿2021/04/06 06:40

編集2021/04/06 07:10

K_3578

総合スコア1282

XiPhone

2021/04/06 07:39

ご教授いたあきありがとうございます！ main { text-align: center;　 } を記入したところ正常に真ん中に表示させることができました！ただ、<h1>Feature</h1>←こちらのh1タグのみだとウェブ上にFeatureの文字が表示されないのは何故でしょうか、、？お分かりになりますでしょうか、、質問ばかりで申し訳ございません。

K_3578

2021/04/06 07:46

こちらで質問者さんが記載されているソースを表示してみた所、表示されないのは、cssで h1 { color: #FFFFFF; } という設定で色を白にしているので、背景色に混ざって見えていないのが一つ、後はheaderと位置が重なっているので後ろに隠れて見えなくなってるんだと思います。この辺は、意図した動作が私には分からないので質問者さんの設計通りになるように弄ってみてください。

XiPhone

2021/04/06 08:02

とてもご丁寧にありがとうございます。背景色やカラーの変更など調節してみます！

K_3578

2021/04/12 05:49

なんかBAついてたんですけど解決されたんですかね？何が問題点だったか教えてくれると助かりますー。

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