常連

自己紹介

現在コーポレートサイトの模写を行っています。
会社情報をdl,dt,ddタグを使って書いており、pc表示ではdt,ddタグをflexboxで横並び＆flex-wrap:wrapでそれぞれの項目ごとに改行されるよう調整、スマホ表示の際はflex-direction:columnを指定し縦並びになるようにしています。

```HTML
<section id="company" class="wrapper">
      <div class="about-company">
        <h2 class="flex-title">
          <span class="title-en">COMPANY</span>
          <span class="title-ja">会社情報</span>
        </h2>

        <dl>
          <dt>会社名</dt>
          <dd>ウェブエンターテインメントデザイン株式会社</dd>
          <dt>所在地</dt>
          <dd>東京都渋谷区桜丘町99-9 West Building 3F</dd>
          <dt>代表</dt>
          <dd>xxxxxx</dd>
          <dt>設立</dt>
          <dd>2021年1月1日</dd>
          <dt>資本金</dt>
          <dd>3,000,000円</dd>
          <dt>事業内容</dt>
          <dd>Web制作・マーケティング</dd>
          <dd class="add">インターネットメディア事業</dd>
          <dd class="add">プロモーション企画・制作</dd>
          <dd class="add">ソーシャル企画・運営</dd>
        </dl>
      </div>

      <div class="company-img">
        <img src="img/company.jpg" alt="">
      </div>
    </section>
```
```css
.wrapper {
  width: 100%;
  max-width: 1032px;
  padding: 0 16px;
  margin: 0 auto;
}

#company {
  position: relative;
  display: flex;
  align-items: center;
  height: 750px;
}

#company .about-company { 
  background-color: #fff;
  position: absolute;
  width: 55%;
  top: 0;
  left: 0;
  padding: 100px 8% 100px 6%;
}

#company .company-img {
  position: absolute;
  /* height: 400px; */
  width: 53%;
  top: 115px;
  right: 0;
}

#company .company-img img {
  height: 400px;
  width: 100%;
  object-fit: cover; 
}

#company .about-company dl {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  align-items: center;
}

#company .about-company dt {
  width: 20%;
  margin-top: 10px;
}

#company .about-company dt:first-of-type {
  margin-top: 0;
}

#company .about-company dd {
  width: 80%;
  margin-top: 10px;
}

#company .about-company dd:first-of-type {
  margin-top: 0;
}

#company .about-company .add {
  margin-left: 20%;
}

@media (max-width: 900px) {

#company .about-company { 
    /* background-color: #fff; */
    position: static;
    width: 100%;
    padding: 40px 20px;
    margin-bottom: 20px;
  }
  
  #company .company-img {
    position: static;
    /* height: 400px; */
    width: 100%;
    padding: 0;
    /* top: 0px; */
    /* right: 0px; */
  }

  #company {
    position: static;
    flex-direction: column;
    /* align-items: center; */
    height: auto;
  }

  #company .about-company dl {
    flex-direction: column;
    /* align-items: flex-start; */
  }

  #company .about-company dt {
    width: 100%;
    margin-top: 20px;
  }

  #company .about-company dd {
    width: 100%;
    margin-top: 5px;
    padding-left: 14px;
  }

  #company .about-company dd:first-of-type {
    margin-top: 5px;
  }

  #company .about-company .add {
    margin-left: 0;
  }

｝
```

スマホ表示部分のコーディングを行っている時、
columnにした後dt,ddのwidthを100％に指定すると、dlの幅からdt,ddが右側にはみ出てしまいました。
確認したところ、pc表示の方で入れていた、最後のdd（class名.add）につけている
```css
#company .about-company .add {
  margin-left: 20%;
}
```
が原因のようで、スマホ表示の方で
```css
#company .about-company .add {
  margin-left: 0;
  }
```
を入れると改善されました。


なぜ最後の3つのddにmargin-leftがついているだけなのに、一番上からの全てのdt,ddに影響を与えたのでしょうか？
最後の3つの部分だけはみ出すのはなんとなく分かるのですが、すべてがはみ出す状態が理解できません・・


ちなみにpc表示の方でflex-wrap:wrap;と指定している状態はスマホ表示でもそのまま生かしており、これを消してみると最後の3つだけがはみ出している状態になりました。

flex-direction:columnにしている状態も関係しているのかな？とは思うのですが、なかなか理解が追い付きません。

理由をご説明いただけると助かります。よろしくお願いいたします。

dt,ddがはみ出ます。flexdirection:column,flexwrap:wrapについて。

スマホアプリからのAPIリクエストを受けるalbがあり、仮にターゲットグループがアクセス過多等の障害によりヘルスチェックが全てunhealthyになった場合、
503 Service Temporarily UnavailableのHTMLが返却されてしまっています。
スマホアプリ側はjsonで待っているため上手く処理ができません。
alb側でメンテナンス時などにカスタマイズしたエラーレスポンスを返せることは知っているのですが、意図せずアプリが落ちてる場合でもjsonでカスタムしたレスポンスを返せる方法があれば教えていただけますか？