ウィンドウズ画面の右側に余白が生まれるのを修正したい。

こちらのサイトでポートフォリオサイトを作っていました。

https://www.hiroyukitakase.work

mac(chrome,firefox,safari,edge)、ipadとiphone(chrome,safari)では確認できなかった余白が、ウィンドウズ１０(chrome,firefox,edge)では、スクロールバー分？の余白が生まれてしまいます。

.section2::before {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  z-index: 1;
  border-top: 60px solid transparent;
  border-left: 50vw solid transparent;
  border-right: 50vw solid #932e40;
  border-bottom: 60px solid #932e40;
}

デベロッパーツールを確認いただければ分かりますが、
section2:beforeの赤色の斜めの部分がwidth100%を超えているようです。

section1:afterでも同じ赤色の斜めの部分は作っていますが、そちらはwidth100%を超えていません。

なぜこのようなことが起きるのか分かりません。

width100%にしなければいい？とも思いますが、この斜めの部分を作るにはborderのleftとrightに50vwずつ使うのでどうすればいいのか分かりません。

解決方法がわかる方、試した方が良いことなどでも良いので、詳しい方ご教授ください。

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

回答1件

ベストアンサー

.section1にはoverflow: hidden;が設定してあるのではみ出てません。
.section2にもoverflow: hidden;を設定すればいいでしょう。

css
1.section2 {
2    width: 100%;
3    height: 100vh;
4    display: flex;
5    flex-direction: row;
6    flex-wrap: wrap;
7    align-items: center;
8    background: hsl(0deg 0% 94%);
9    box-sizing: border-box;
10    position: relative;
11    padding-bottom: 15vh;
12    overflow: hidden; /* 追加 */
13}