レスポンシブデザイン 余白を固定したい
問題
現在iSaraの模写をしています。
windowのサイズを変更した際に、
背景が橙色箇所の「お問い合わせ&資料請求はこちら」ボタンの左右の余白を固定したいです。
下記の挙動を目指しています。
windowのサイズを変更しても左右の余白が固定されています。
— 霧崎さくや (@Sakuya_wd) November 12, 2020
下記は現状です。
windowのサイズを変更すると左右の余白が固定されません。
— 霧崎さくや (@Sakuya_wd) November 12, 2020
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title>
<link rel="icon" href="https://isara.life/wp-content/uploads/2018/10/favicon.ico">
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/responsive.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<script src="./script/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="./script/jQuery.js"></script>
</head>
<body>
<div class="wrapper">
<!-- ヘッダー -->
<div class= "header">
<div class="headerInner">
<div class="headerLogo">
<img src ="./image/isaralogo.png">
</div>
<div class="headerTitle">
<p>バンコクのノマドエンジニア育成講座</p>
</div>
<div class="headerContact">
<a href="#nineteenthSection-link">お問い合わせ / 資料請求はこちら</a>
</div>
</div>
</div>
<div class="content">
<!-- メインコンテンツ -->
<div class="secondSection">
<div class="secondSection-scroll">
<a href="#firstSection-scroll"></a>
</div>
<div class="secondSection-firstParagraph">
<p>まずは２０日間で、</p>
</div>
<div class="secondSection-secondParagraph">
<p>月１０万円稼げるスキルを手にいれよう。</p>
</div>
<div class="secondSection-thirdParagraph">
<p>※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p>
</div>
<!-- 問題となる箇所のソースコード ここから -->
<div class="secondSection-inner">
<div class="secondSection-fourthParagraph">
<a href="#nineteenthSection-link">お問い合わせ&資料請求はこちら</a>
</div>
</div>
<!-- 問題となる箇所のソースコード ここまで -->
<div class="secondSection-fifthParagraph">
<p>第６期生：2019年11月25日 ~ 2019年12月14日＊締め切りました</p>
</div>
<div class="secondSection-sixthParagraph">
<p>第７期生：2020年2月17日 ~ 2020年3月7日＊締め切りました</p>
</div>
<div class="secondSection-seventhParagraph">
<p>第8期生：2021年の2月 ~ 3月ごろを予定＊資料請求受付中です</p>
</div>
<div class="secondSection-link">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="small" data-share="true"></div>
</div>
</div>
</div>
<!-- フッター -->
<div class="footor">
<div class="footor-firstParagraph">
<p>バンコクのノマドエンジニア育成講座、iSara[イサラ]</p>
</div>
<div class="footor-secondParagraph">
<p>Copyright ©︎ <a href="#">iSara</a> All Rights Reserved.</p>
</div>
<div class="footor-link">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"></script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="small" data-share="true"></div>
</div>
<div class="footor-thirdParagraph">
<p>Designed by <a href="#">Maya Ogi</a> / Developed by <a href="#">Kentaro Koga</a></p>
</div>
</div>
</div>
</body>
</html>
/* タブレットサイズ */
@media (max-width: 1190px){
/* ヘッダー */
.headerTitle p{
padding: 36px 0px 0px 6px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 12px;
line-height: 19px;
color: #333333;
letter-spacing: 0.001em;
}
.headerContact{
margin-left: auto;
margin-right: 10px;
padding: 23px 0px 0px 0px;
}
.headerContact a{
background-color: #DA6B64;
border-radius: 30px;
padding: 15px 40px 15px 39px;
font-style: normal;
font-weight: 300;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 12px;
line-height: 19px;
color: #ffffff;
text-decoration: none;
letter-spacing: 0.01em;
}
/* メインコンテンツ */
.secondSection{
width: 100%;
height: 462px;
}
.secondSection-firstParagraph p{
padding: 29px 0px 0px 0px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 16px;
line-height: 26px;
color: #FFFFFF;
text-align: center;
letter-spacing: 0.09em;
}
.secondSection-secondParagraph p{
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 16px;
line-height: 26px;
color: #FFFFFF;
text-align: center;
letter-spacing: 0.09em;
}
.secondSection-thirdParagraph p{
background-color: #F9F2F4;
border-radius: 5px;
width: 380px;
height: 14px;
margin: auto;
margin-top: 11px;
padding: 0px 0px 7px 0px;
font-style: normal;
font-weight: 600;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 14px;
line-height: 23px;
color: #c7254e;
text-align: center;
text-decoration: none;
letter-spacing: 0.13em;
}
/* 問題となる箇所のソースコード ここから */
.secondSection-fourthParagraph{
padding: 38px 0px 0px 0px;
text-align: center;
}
.secondSection-fourthParagraph a{
padding: 30px 31% 30px 31%;
background-color: #DA6B64;
border-radius: 55px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 18px;
line-height: 29px;
color: #FFFFFF;
text-decoration: none;
letter-spacing: 0.09em;
}
/* 問題となる箇所のソースコード ここまで */
.secondSection-fifthParagraph p{
padding: 53px 0px 0px 0px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 18px;
line-height: 29px;
color: #FFFFFF;
text-align: center;
letter-spacing: 0.001em;
}
.secondSection-sixthParagraph p{
padding: 28px 0px 0px 0px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 18px;
line-height: 29px;
color: #FFFFFF;
text-align: center;
letter-spacing: 0.001em;
}
.secondSection-seventhParagraph p{
padding: 27px 0px 0px 0px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 18px;
line-height: 29px;
color: #FFFFFF;
text-align: center;
letter-spacing: 0.001em;
}
0