HTMLのdl dt ddのデザインが崩れてしまう

<template>
  <div class="top_page">
    <div class="top">
      <img src="../assets/img/sofa.jpg" alt="" class="top_image" />
    </div>
    <section class="about" id="wrapper">
      <h2 class="about-title">About</h2>
      <div class="introduction">
        <div class="name-contents">
          <p class="name">Xxxxx Ashley</p>
        </div>
        <ul class="address_contents">
          <li class="address" v-for="address in addresses" :key="address.id">{{ address.sentence }} </li>
        </ul>
        <div class="profile-contents">
          <p class="profile">プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキ ストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキスト</p>
        </div>
      </div>
    </section>
    <section class="work" id="wrapper">
      <h2 class="work-title">Work</h2>
      <ul class="work-products">
        <li class="work-products-image" v-for="image in images" :key="image.id">
          <img :src="image.img" class="products-image" >
        </li>
      </ul>
    </section>
    <section class="news" id="wrapper">
      <h2 class="news-title">News</h2>
      <dl class="news-contents">
        <template v-for="news in newses" :key="news.id">
          <dt class="date">{{ news.yyyMMdd }}</dt>
          <dd class="info">
            {{ news.about }}
          </dd>
        </template>
      </dl>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addresses: [
        {
          sentence: '2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan'
        },
        {
          sentence: 'tel: 000-0000-0000'
        },
        {
          sentence: 'url: www.xxxxxx.jp'
        },
        {
          sentence: 'mail: xxx@xxxxxx.jp'
        },
      ],
      images: [
        {
          img: require('../assets/img/bed.jpg')
        },
        {
          img: require('../assets/img/pair-chair.jpg')
        },
        {
          img: require('../assets/img/closet.jpg')
        },
        {
          img: require('../assets/img/baby-bed.jpg')
        },
        {
          img: require('../assets/img/cool-sofa.jpg')
        },
        {
          img: require('../assets/img/pots.jpg')
        },
      ],
      newses: [
        {
          yyyMMdd: '2020.XX.XX',
          about: 'デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。',
        },
        {
          yyyMMdd: '2020.XX.XX',
          about: 'ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。',
        },
        {
          yyyMMdd: '2019.XX.XX',
          about: '【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト',
        },
        {
          yyyMMdd: '2019.XX.XX',
          about: 'デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。',
        },
        {
          yyyMMdd: '2019.XX.XX',
          about: '【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト',
        },
      ],
    }
  },
}
</script>
<style>
.top_page {
  font: normal normal bold 24px/36px Meiryo;
}
.top_image {
  width: 100%;
  height: 420px;
}
#wrapper {
  max-width: 960px;
  margin: 80px auto 130px auto;
  padding: 0 4%;
}
.about-title,
.work-title,
.news-title {
  font-size: 24px;
}
.introduction {
  font-weight: normal;
  margin-top: 116px;
  text-align: left;
  font-size: 14.4px;
}
.address_contents {
  padding-left: 0;
}
.address {
  line-height: 20px;
  list-style: none;
}
.profile-contents {
  margin-top: 30px;
  line-height: 20px;
}
.work-products {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 0;
}
.work-products-image {
  list-style: none;
}
.work-products-image {
  width: 31%;
  margin-top: 30px;
}
.products-image {
  width: 100%;
  height: 172px;
}
.news {
  font-size: 14.4px;
  font-weight: normal;
}
.news-contents {
  display: flex;
  flex-wrap: wrap;
  border-top: solid 1px #c8c8c8;
  margin-bottom: 20px;
}
.date {
  width: 20%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}
.info {
  width: 80%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}

</style>