isaea 全体のwitdh:100%を超え、はみ出している状態配置されてしまう

Question

私は今isaraの模写をしています。

直したい点は、ヘッダーの資料請求というコマンドをtop:0; right:0;で固定したのですが
これが、全体のwitdh:100%を超え、はみ出している状態配置されてしまうので、全体の100％の中に収めたいです。
isaraの見本のサイトを検証して、要素にかかっているCSSを見ても分からなかったので誰か教えて頂けませんでしょうか。

   <header>
    <div class="header-in">
        <div class="title">
            <div class="logo">
              <img src="images/isaralogo.png" alt="ヘッダーロゴ">
            </div><!--logo-->

            <div class="subtitle">
              <p>バンコクのノマドエンジニア育成講座</p>
            </div><!--subtitle-->         
        </div><!--title-->
        
        <div class="contctsp">
          <img src="images/form.png" alt="資料請求">
          <a href>資料請求</a>
        </div>
      </div><!--header-in-->
  </header>
<main>
  <div class="example">
    <div class="text_area">
      <p>プログラミングで<br>
        人生の安定を手にいれよう</p>
      <div class="isara"><img src="images/isaralogolarge.png" alt="メインヴィジュアル画像"></div>
      <p>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
    </div><!--text_area-->
  </div><!--example-->

body, p, h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  background: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
}

.headerlog img{
  width: 90px;
}
header{
  position: relative;
  height: 60px;
}
header h1{
  font-weight: 600;
  font-size: 10px;
  color: #333333;
  line-height: 16px;
}
.contctsp a{
  font-size: 12px;
  color: #fff;
  margin: auto;
  display: block;
}



.logo {
  position: absolute;
  top: 25px;
  left: 10px;
  margin-top: 0;
}

.logo img {
  width: 90px;
}

.contctsp img{
  width: 20px;
}

.contctsp{
  display: block;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0px;
  background-color: #da6b64;
  padding: 9px 11px;
}	

.example {
  background-image: url(images/main.jpg);
  display: table;
  position: relative;
  background-size: cover;
  width: 100%;
  min-height: 310px;
  background-position: center;
  padding-top:60px ;
  padding-left: 15px;
  margin-left:auto;
  margin-right:auto ;
  
}

Answer 1

提示のCSSでは質問の画像のような配置にはならないので、提示以外のCSSが影響しているのだと思います。
現象が再現できるコードを提示してください。

とりあえず、提示のCSSで気になった点だけを指摘しておきます。

.exampleにwidth: 100%;を設定してますが、そのため画面からはみでています。
また、左右マージンをautoに設定して中央寄せにしようとしていると思いますが、それが効かなくなってます。width: 100%;は不要なので削除すべきです。

.example {
  background-image: url(images/main.jpg);
  display: table;
  position: relative;
  background-size: cover;
/*  width: 100%; */
  min-height: 310px;
  background-position: center;
  padding-top:60px ;
  padding-left: 15px;
  margin-left:auto;
  margin-right:auto ;

}

Comments

[nakayamaakg]

遅くなり申し訳ございません。

<p>バンコクのノマドエンジニア育成講座</p>のmaginかpaddingが大きすぎたため
exampleの外に余白ができたようでした。今回は自分で解決できましたが、アドバイス頂きありがとうございました。