線が一本入らない、写真が一枚真ん中に動かない

Question

もう少しで完成なのに線が一本入らない、写真が1枚真ん中に動かない

お手本の検証モードと同じように入力しているのに適用されません

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

ボーダーを入力しているのに線が表示されない
画像にマージンを入力しているのに真ん中に動かない

試したこと

昨日のじてんではもっとレイアウト崩れてたんですが、VSコードに検索する機能が付いていたので、怪しい部分を探して誤字脱字が多すぎて一個づつ直していったらここまで整いました。この二箇所だけ、どれだけ探っても改善しません。

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

ホームページを模写して勉強中です。

Comments

[H40831]

HTMLやCSSをどう書いてるか教えてくれないと、超能力者でもないと回答できませんよ

[yoshinavi]

＞誤字脱字が多すぎて一個づつ直していったらここまで整いました。
→　誤字脱字のチェックの次は、要素の範囲を確認してみてください。
（高さや幅が確保されているかどうか 等）

いずれにしても、ヒントや回答を求める場合は元となるコードの提示が無いと、誰も回答できず推測しか出来ませんので、「H40831」さんもご指摘しているように、症状が再現するコードを提示してください。

[yoshinavi]

沢山のコード画像を貼って頂いているのですが、回答側は、基本的にコードをコピペして検証します。
申し訳ありませんが、ヘルプ等を参考にして、「コードブロック」として各コード（HTML、CSS、JavaScript 等）を提示してください。

[yoshinavi]

パッと見ですがクリアフィックスの記述ミスが見受けられました。プロパティを見直してみてください。

-修正しました-

[miya6373]

解決しました、次はコードブロックを上手に使って質問します。わざわざ答えて頂いてありがとうございます。

Answer 1

画像が寄っている部分は
<img src="img/ims144_01_package.jpg" alt="商品パッケージ" class="pkgArt">
こちらのclassの前に全角スペースか何かが入っているため、classが適用されていないようです。

また、ボーダー部分はCSSの写しミスかと思われます。

div#main h2 {
  border-bottom: 10px; /* ここが間違っている */
  border-bottom: 1px solid #cfcfcf; /* お手本サイトではこうなっている */
}

お手本サイトとご自身で模写されたページの同じ箇所をデベロッパーツールで比較すると、原因を発見しやすいと思います。

Comments

[miya6373]

直りました！見つけて頂いてありがとうございます！

Answer 2

flex をつかったらまんなかにできるとおもいます。
ボーダーに関してはソースがないとわかりません。

Comments

[miya6373]

打ち間違いでした、コードがないのにわざわざ答えて頂いてありがとうございます。