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

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

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

HTML
1   <header>
2    <div class="header-in">
3        <div class="title">
4            <div class="logo">
5              <img src="images/isaralogo.png" alt="ヘッダーロゴ">
6            </div><!--logo-->
7
8            <div class="subtitle">
9              <p>バンコクのノマドエンジニア育成講座</p>
10            </div><!--subtitle-->         
11        </div><!--title-->
12        
13        <div class="contctsp">
14          <img src="images/form.png" alt="資料請求">
15          <a href>資料請求</a>
16        </div>
17      </div><!--header-in-->
18  </header>
19<main>
20  <div class="example">
21    <div class="text_area">
22      <p>プログラミングで<br>
23        人生の安定を手にいれよう</p>
24      <div class="isara"><img src="images/isaralogolarge.png" alt="メインヴィジュアル画像"></div>
25      <p>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p>
26    </div><!--text_area-->
27  </div><!--example-->

CSS
1
2body, p, h1, h2, h3, h4, h5, h6 {
3  text-rendering: optimizeLegibility;
4  background: rgba(0, 0, 0, 0);
5  -webkit-font-smoothing: antialiased;
6}
7
8.headerlog img{
9  width: 90px;
10}
11header{
12  position: relative;
13  height: 60px;
14}
15header h1{
16  font-weight: 600;
17  font-size: 10px;
18  color: #333333;
19  line-height: 16px;
20}
21.contctsp a{
22  font-size: 12px;
23  color: #fff;
24  margin: auto;
25  display: block;
26}
27
28
29
30.logo {
31  position: absolute;
32  top: 25px;
33  left: 10px;
34  margin-top: 0;
35}
36
37.logo img {
38  width: 90px;
39}
40
41.contctsp img{
42  width: 20px;
43}
44
45.contctsp{
46  display: block;
47  text-align: center;
48  position: absolute;
49  top: 0;
50  right: 0px;
51  background-color: #da6b64;
52  padding: 9px 11px;
53}	
54
55.example {
56  background-image: url(images/main.jpg);
57  display: table;
58  position: relative;
59  background-size: cover;
60  width: 100%;
61  min-height: 310px;
62  background-position: center;
63  padding-top:60px ;
64  padding-left: 15px;
65  margin-left:auto;
66  margin-right:auto ;
67  
68}

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

回答1件

ベストアンサー

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

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

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

css
1.example {
2  background-image: url(images/main.jpg);
3  display: table;
4  position: relative;
5  background-size: cover;
6/*  width: 100%; */
7  min-height: 310px;
8  background-position: center;
9  padding-top:60px ;
10  padding-left: 15px;
11  margin-left:auto;
12  margin-right:auto ;
13
14}