widthの仕組みが理解できない
問題
現在iSaraの模写をしています。
width auto ,padding 0px 10%, box-sizing:border-boxを組み合わせた際に、
画面幅を狭くするとwidthが広がりますが何故広がるのでしょうか?
０から始めるプログラミング事前学習講座などの部分のwidthが広がっています。
— 霧崎さくや (@Sakuya_wd) December 29, 2020
ソースコード
index.html
<div class="twelfthSection">
<div class="twelfthSection-firstParagraph">
<p>iSara[イサラ]で学べる内容</p>
</div>
<div class="twelfthSection-secondParagraph">
<p>渡航前の事前課題と渡航中に学べることの一覧です。</p>
</div>
<!-- 問題となるhtml ここから-->
<div class="twelfthSection-inner">
<!-- 問題となるhtml ここまで-->
<div class="twelfthSection-firstList">
<div class="twelfthSection-thirdParagraph">
<p>渡航前の事前学習</p>
<ul>
<li>０から始めるプログラミング事前学習講座</li>
<li>参加者グループコミュニティ</li>
<li>チャットサポート</li>
<li>事前スカイプコンサル</li>
<li>環境構築の事前学習</li>
<li>jQueryの事前学習講座</li>
<li>Bootstrapの事前講座</li>
<li>PHP / Mysqlの事前学習講座</li>
<li>稼ぐためのHTML/CSS講座</li>
<li>WordPressの事前学習講座</li>
</ul>
</div>
</div>
<div class="twelfthSection-secondList">
<div class="twelfthSection-fourthParagraph">
<p>バンコク渡航中</p>
<ul>
<li>フリーランス独立術講座</li>
<li>実際の実務案件をこなす</li>
<li>ノマドフリーランス体験</li>
<li>バンコク生活体験</li>
<li>クラウドソーシング活用講座</li>
<li>フリーランスのための営業講座</li>
</ul>
</div>
</div>
</div>
</div>
style.css
.twelfthSection{
background-image: url("../image/classbg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 777px;
}
.twelfthSection-firstParagraph p{
padding: 59px 0px 0px 0px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 24px;
line-height: 40px;
text-align: center;
color: #ffffff;
letter-spacing: 0.06em;
}
.twelfthSection-secondParagraph p{
padding: 10px 0px 0px 0px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 14px;
line-height: 22px;
text-align: center;
color: #ffffff;
letter-spacing: 0.11em;
}
/*問題となるCSS ここから*/
.twelfthSection-inner{
display: flex;
flex-direction: row;
width: auto;
max-width: 780px;
padding: 0px 10%;
margin: 55px auto 0 auto;
box-sizing: border-box;
}
/*問題となるCSS ここまで*/
.twelfthSection-firstList{
width: 50%;
padding: 0px 15px 0px 0px;
box-sizing: border-box;
}
.twelfthSection-thirdParagraph{
border-left: solid 2px #006EA9;
border-top: solid 2px #006EA9;
border-right: solid 2px #006EA9;
border-bottom: solid 2px #006EA9;
border-radius: 5px 5px 5px 5px;
background-color: #ffffff;
}
.twelfthSection-thirdParagraph p{
background-color: #006EA9;
margin: 0px 0px 10px 0px;
padding: 15px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 16px;
line-height: 25px;
text-align: center;
color: #ffffff;
letter-spacing: 0.09em;
}
.twelfthSection-thirdParagraph ul{
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 14px;
line-height: 22px;
text-align: center;
color: #000000;
letter-spacing: 0.11em;
}
.twelfthSection-thirdParagraph ul li{
padding: 10px;
border-bottom: 1px dotted #e5e5e5;
list-style: none;
}
.twelfthSection-secondList{
width: 50%;
padding: 0px 0px 0px 15px;
box-sizing: border-box;
}
.twelfthSection-fourthParagraph{
border-left: solid 2px #006EA9;
border-top: solid 2px #006EA9;
border-right: solid 2px #006EA9;
border-bottom: solid 2px #006EA9;
border-radius: 5px 5px 5px 5px;
background-color: #ffffff;
}
.twelfthSection-fourthParagraph p{
background-color: #006EA9;
margin: 0px 0px 10px 0px;
padding: 15px;
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 16px;
line-height: 25px;
text-align: center;
color: #ffffff;
letter-spacing: 0.09em;
}
.twelfthSection-fourthParagraph ul{
font-style: normal;
font-weight: 600;
font-family: "Hiragino Kaku Gothic Pro";
font-size: 14px;
line-height: 22px;
text-align: center;
color: #000000;
letter-spacing: 0.11em;
}
.twelfthSection-fourthParagraph ul li{
padding: 10px;
border-bottom: 1px dotted #e5e5e5;
list-style: none;
}
1
