配置したい場所に画像が動いてくれません。

前提・実現したいこと

現在、webサイトを摸写中の初心者のものです。
色々と問題があり試行錯誤を繰り返して作成中なのですが、その中でも１つ質問させてください。

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

上の画像が完成品です。下の画像が私のうまくいかないものです。
背景画像の下の部分のモヤモヤはCSSに画像を入れています。
ですが、自分の今の知識でやってみたところ、どうしても実際のものと同じところに画像が来ません。

＜HTML＞

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>クネイプ</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>

<body>
   <div  class="main">
      <div class="main-inner">
         <h1 class="main-logo"><a href="#"><img src="images/logo.png" alt="クネイプ"></a></h1>
         <h2><img src="images/main_title_sp.png" alt="" width="647px" height="150px"></h2>
         <h3><img src="images/main_pdtitle.png" alt=""></h3>
      </div>  <!--    /inner     -->
   </div>  <!--   /main    -->

   <div class="sec01">
          <h4 class="sec01_title"><img src="images/c01_title.png"></h4>
          <p>こだわりの天然岩塩にユズとジンジャーの 天然植物成分を配合したバスソルト。<br>
             爽やかでほろ苦いユズに、 ピリッとスパイシーなジンジャーをブレンドした香りで、<br>
             全身にぬくもり巡る発汗バスタイムを。<br>
             <span>850g：2,400円（税抜） 50g：150円（税抜）</span></p>
          <div class="sec01_btn"><a href="#">ご購入はこちら</a>
          </div> <!--  sec-01_btn    -->
          <div class="sec01_btn_02"><a href="#"><img src="images/c01_btn.png"  width="373"></a>
         </div>   <!--  sec-02_btn    -->

   </div> <!--     sec-01      -->
    
             
   <div class="sec02">
    <div class="sec02-inner">
      <h4><img src="images/c02_title.png" alt="天然植物成分配合"　width="696px" height="32px"></h4>
      <img src="images/c02_img1_sp.png" width="485px"  height="286px">
      <div class="howtomake"><a href="#"><img src="images/c02_bnr.png" width="463px" height="94px"></a></div>
      <ul class="yuzu-ginger">
         <li class="list yuzu">
            <img src="images/c02_yuzu.png"  alt="yuzu" width="268px"  height="167px">
            <p>血行促進<br>冷え症予防<br>むくみ予防</p>
            <img src="images/c02_btn.png" alt="効果を詳しく見る"　width="244px" height="37">

         </li> <!--   /li      -->
     
         <li class="list ginger">
            <img src="images/c02_ginger.png"  alt="yuzu" width="268px"  height="167px">
            <p>血行促進<br>発汗効果<br>鎮痛作用</p>
            <img src="images/c02_btn.png" alt="効果を詳しく見る"　width="244px" height="37">




         </li> <!--  /li       -->




      </ul> <!--    /ul        -->






    </div> <!--          /sec02-inner             -->  
   </div> <!--          /sec02               -->       
            
           








   

</body>

＜CSS＞

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*        リセットcss           */
body {
    background-color:#faf3cf;
}
.main {
   min-height:763px;
   background-image:url(images/main_bg-1.jpg);
   background-position: center top; 
   background-repeat: no-repeat;
   background-size: cover;
}
.main-inner {
    width:1000px;
    margin:0 auto;
    position:relative;
}

.main-logo {
    position:absolute;
    margin-top:18px;
    width:14px;
    height:60px;
}
.main-logo a:hover {
    opacity: 0.8;

}

.main-inner h2 img {
    
    position:absolute;
    top:94px;
    left:178px;
    
}
.main-inner h3 img {
    width:354px;
    height:132px;
    position:absolute;
    top:362px;
    left:75px;
}

.main::after {
    content: "";
    background:url(images/punc1.png);
    background-repeat: repeat-x;
    background-position:center;
    width:100%;
    height:132px;
    position:absolute;
    left:0;
    bottom:0;

}

/*        sec01            */


.sec01  {
    text-align:center;
}

.sec01_title  img {
    width:386px;
    height:105px;
    margin-bottom:46px;
    margin-top:100px;
}

.sec01 p {
    font-size:18px;
    font-weight:normal;
    color:#333;
    line-height:2.2;
}

.sec01 p span {
    font-size:14px;
    color:#333;
    padding-bottom:52px;

}

.sec01_btn {
    margin-top:53px;
    margin-bottom:47px;
    
}
.sec01_btn a{
    background-color:#004b4a;
    text-decoration:none;
    color:#fff;
    padding:17px 103px;
    font-size:24px;
    box-sizing:border-box;
    border-radius:10px;
}

.sec01_btn_02 a img{
    box-sizing:border-box;
    border-radius:5px;
}

/*      sec-02        */

.sec02-inner {
    width:866px;
    text-align:center;
    margin:0 auto;
    margin-top:70px;
    background:url(images/c02_bg2.png);
    background-repeat:repeat-y;
   
}
    
.sec02-inner::before {
  content:"";
  background:url(images/c02_bg1.png);
  background-position:center;
  background-repeat: no-repeat;
  position:absolute;
  left:0;
  top:0;

}

.sec02-inner h4 {
    margin-top:48px;
    margin-bottom:40px;
}

.howtomake  {
    margin-top:25px;
    margin-bottom:33px;

}
.howtomake a :hover{
    opacity:0.8;
    
}

.yuzu-ginger {
    list-style:none;
    display:flex;
    justify-content:space-around;

}

.list p {
    margin-top:20px;
    color:#4AA204;
    margin-bottom:28px;
    line-height:1.5;
    font-weight: bold;
    
}

.yuzu-ginger li img a:hover {
   opacity: 0.8;
}

.sec02-inner::after {
    content:"";
    background:url(images/c02_bg3.png);
}

親要素にposition:relative,
子要素のafter部分にabsoluteを設定したので、うまく行くと思ったのですが
ダメでした。

行っている内容もコードの内容もぐちゃぐちゃになっていたらすみません。
助言を頂けたら嬉しいです。

補足
使っているパソコン：macbookpro
使っているエディター：VScode

Lhankor_Mhy

2021/04/05 02:39

「同じところに画像が来ません」とのことですが、その画像は punc1.png のことですか？

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

回答1件

どうしても実際のものと同じところに画像が来ません。

その画像が punc1.png のことだという推測で回答します。

親要素にposition:relative,

子要素のafter部分にabsoluteを設定したので、うまく行くと思ったのですが
__ダメでした。 __

親要素は.main-innerではなくて.mainだと思います。

css
1/*.main-inner {*/
2.main {
3    position:relative;
4}

投稿2021/04/05 08:53

Lhankor_Mhy

総合スコア36960

Akkkkkiko

2021/04/05 10:46

Lhankor_Mhy様）ご回答ありがとうございます。おっしゃる通り punc1.pngの画像です。親要素を変えてやってみます！結果をまたご報告しますね！

Lhankor_Mhy

2021/04/16 08:24

解決しませんでしたか？不明の点があれば、コメントでお知らせください。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

配置したい場所に画像が動いてくれません。

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

関連した質問