figureタグに謎の余白
解決したいこと
右側に謎の余白ができます
デベロッパーツールで確認したところどうやら下部にあるfigureタグに原因があるみたい（imgタグには要因はありません）なんですがそのタグには何も設定していません
paddingやmarginを０にしても効果はありませんでした
発生している問題・エラー
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex , nofollow">
<title>コーディング課題（PENGIN BLOG）</title>
<link rel="stylesheet" href="../reset.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<h1 class="header__logo" style="background-image: url('img/site-logo.png');"></h1>
<div class="hamburger--btn">
<span class="bars">
<span class="bar top-bar"></span>
<span class="bar middle-bar"></span>
<span class="bar bottom-bar"></span>
</span>
<p>MENU</p>
</div>
<nav class="site-nav">
<ul class="site-nav__list">
<li class="site-nav__list__logo" img="img/グループ 8.png" alt="DIGSMELE.INC"></li>
<li class="site-nav__list__item"><a class="site-nav__list__link" href="#">ABOUT US</a></li>
<li class="site-nav__list__item"><a class="site-nav__list__link" href="#">WORKS</a></li>
<li class="site-nav__list__item"><a class="site-nav__list__link" href="#">CULTURE</a></li>
<li class="site-nav__list__item"><a class="site-nav__list__link" href="#">TOPICS</a></li>
<li class="site-nav__list__item"><a class="site-nav__list__link" href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<main>
<div class="topView">
<span class="bg--img topView__bg--img" style="background-image: url('img/kv-img.png')"></span>
<div class="copyTitle topView__copyTitle">
<p class="copyTitle__top">デザインで人を笑顔にする会社</p>
<p class="copyTitle__middle">DIGSMILE INC.</p>
<p class="copyTitle__bottom">DESIGN<br>FOR<br>SMILE.</p>
</div>
</div>
<div class="container-wrapper">
<section class="bg--img about--section" style="background-image: url('img/about-img.png');">
<div class="simpleBlock about--section__simpleBlock">
<h2>ABOUT US</h2>
<p>
DIGSMELEは、デザインで人を絵がをにする会社。<br>なんでもない日常に少しのワクワクと遊び心を提供します。笑顔には世界を変える力<br>がある、デザインには人を幸せにする力がある。毎日に幸せを感じて生きていきたい。<br>DIGSMILEの社名にはそんな思いが込められています。
</p>
<a href="" class="btn">READ MORE</a>
</div>
</section>
<div class="medias">
<section class="media-colum medias__media-colum">
<h2>WORKS</h2>
<figure><img class="media-colum__img" src="img/works-img.png" alt=""></figure>
<p>DIGSMILEの制作実績を紹介します。 </p>
<a class="btn" href="">READ MORE</a>
</section>
<section class="media-colum medias__media-colum">
<h2>CULTURE</h2>
<figure><img class="media-colum__img" src="img/culture-img.png" alt=""></figure>
<p>DIGSMILEの社内文化について紹介します。</p>
<a class="btn" href="">READ MORE</a>
</section>
</div>
<section class="">
<h2>LATEST TOPICS</h2>
<ul>
<li>
<div>
<timedd datetime="2020-02-01">
2020.02.01
</timedd>
</div>
<a href="#">イベントレポート「VRクリエイター座談会～5Gの次に来るもの～</a>
</li>
<li>
<div>
<time datetime="2020-01-18">
2020.01.18
</time>
</div>
<a href="#">プレスのリリースのお知らせ DIGGIN'RECORDS</a>
</li>
<li>
<div>
<time datetime="2020-01-01">
2020.01.01
</time>
</div>
<a href="#">新年あけましておめでとうございます</a>
</li>
</ul>
<a class="btn" href="">READ MORE</a>
</section>
<section class="">
<div>
<h2>CONTACT</h2>
<p>制作の以来、取材の以来、IRや採用についての連絡・お問い合わせはコンタクトページから承っております。<br>まずはお気軽にご連絡ください。担当者から改めて返信いたします。</p>
<div href="">READ MORE</div>
</div>
<figure><img class="" src="img/recruit-img.png" alt=""></figure>
</section>
</div>
</main>
<footer>
<div>
<p>©2018 DIGSMILE INC.</p>
</div>
</footer>
</body>
</html>
css sass
@charset "utf-8";
@function topTitle-h($height) {
@return $height/2
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
}
main{
align-items: centers;
}
h2{
margin-bottom: 30/1440*100vw;
}
p {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.bg--img {
display: block;
background-repeat: no-repeat;
max-width: 100%;
height: auto;
}
.btn {
display: inline-block;
padding: 20px 20px;
width: 160px;
max-width: 100%;
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
letter-spacing: 0.015em;
line-height: 0.375;
background-color: black;
}
.container-wrapper {
width: 76.3888%;
max-width: 100%;
margin: 0 auto;
}
.header {
width: 100%;
display: flex;
position: fixed;
z-index: 10000;
justify-content: space-between;
color: white;
&__logo {
background-size: cover;
height: calc(28.2/1440*100vw);
width: calc(260/1440*100vw);
}
}
.hamburger--btn {
display: flex;
align-items: center;
}
.bars {
display: flex;
flex-flow: column;
gap: 5px;
}
.bar {
display: inline-block;
background-color: white;
height: 2px;
width: 22px;
transform: translateY(-50%);
}
.site-nav {
display: none;
&__list {
&__logo {
list-style-type: none;
}
&__item {
list-style-type: none;
padding: {}
}
&__link {
text-decoration: none;
}
}
}
.topView {
max-width: 100%;
&__bg--img {
position: relative;
height: 44.44444vw;
margin-bottom: 15.1515%;
width: 76.38888%;
z-index: 50;
background-size: cover;
}
&__copyTitle {
position: absolute;
right: 0%;
top: 0%;
transform: translate(-50%, 50%);
z-index: 100;
}
&::after {
content: "";
z-index: -1;
display: block;
top: 0;
right: 0;
position: absolute;
height: calc(740/1440*100vw);
width: 50%;
background-color: black;
}
}
.copyTitle {
color: white;
&__top {
font-size: 1.25rem;
font-weight: bold;
line-height: (20/17);
}
&__middle {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
line-height: (20/12);
}
&__bottom {
font-size: 4.5rem;
line-height: (72/86);
font-family: 'Montserrat', sans-serif;
font-weight: 800;
margin-bottom: 12px;
}
}
.about--section{
padding: calc(110/1440*100vw) calc(225/1440*100vw);
&__simpleBlock{
padding: calc(50/1440*100vw) calc(30/1440*100vw);
}
}
.simpleBlock{
color: black;
background-color: white;
display: inline-block;
}
.medias{
display: flex;
gap: calc(60/1100*100%);
&__media-colum{
flex-shrink: 1;
}
}
.media-colum{
}```
0
