-2

以下のHTMLにおいて、<h2 id="company" class="conpanylogo">内のdd部<dd>プロモーション企画・制作</dd><dd>ソーシャル企画・運営</dd>の部分だけが、他のdd部分のように行頭が揃いません。
行頭を揃えるにはCSSでどう編集したら良いでしょうか?ご教授お願いします。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>Web Entertainment Design</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>


<body>
    <header id="header">
        <div class="wrapper">
            <section class="headerlists">
                <div class="headerimg"><img src="img/logo.svg" alt=""></div>
                <nav class="headerlist">
                    <ul>
                        <li><a href="#news">NEWS</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#business">BUSINESS</a></li>
                        <li><a href="#company">COMPANY</a></li>
                    </ul>
                </nav>
            </section>
        </div>
        <div class="button">
            <a href="#">お問い合わせ</a>
        </div>
    </header>
    <main>
        <section class="bg-img"></section>
        <div class="wrapper">
            <h1 class="newslogo">NEWS</h1>
            <p>ニュース</p>
            <div id="news" class="news">
                <ul class="title">
                    <li>20221.01.01<span>NEWS</span>
                        <p>タイトルタイトルタイトルタイトル</p>
                    </li>
                    <li>20221.01.01<span>PRESS</span>
                        <p>タイトルタイトルタイトルタイトル</p>
                    </li>
                    <li>20221.01.01<span>NEWS</span>
                        <p>タイトルタイトルタイトルタイトル</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <div id="about" class="about">
                <img src="img/about.jpg" alt="">
                <div class="abouttext">
                    <h2>About</h2>
                    <a>私たちについて</a>
                    <p>テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
                        テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
                        テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
                    </p>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div id="business" class="business">
                <h2>BUSINESS</h2>
                <p>事業内容</p>
            </div>
            <div class="businessphotos">
                <div class="businessphoto1">
                    <h3>- web制作•マーケティング
                        <img src="img/business1.jpg" alt="">
                    </h3>
                    <h3>- インターネットメディア事業
                        <img src="img/business2.jpg" alt="">
                    </h3>
                </div>
                <div class="businessphoto2">
                    <h3>-プロモーション企画・制作
                        <img src="img/business3.jpg" alt="">
                    </h3>
                    <h3>-ソーシャル企画•運営
                        <img src="img/business4.jpg" alt="">
                    </h3>
                </div>
            </div>
            <section class="COMPANY">
                <div class="companyinfo">
                    <h2 id="company" class="companylogo">COMPANY</h2>
                    <p>会社情報</p>
                    <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>インターネットメディア事業</dd>
                        <dd>プロモーション企画・制作</dd>
                        <dd>ソーシャル企画・運営</dd>
                    </dl>
                </div>
                <div class="companyphoto">
                    <img src="img/company.jpg" alt="">
                </div>
            </section>
        </div>
    </main>
    <section class="footer">
        <div class="wrapper">
            <div class="footers">
                <div class="footerlogo">
                    <img src="img/logo.svg" alt="">
                </div>
                <div class="footertext">
                    <p>Web Entertainment Design Inc.<br>
                        West Building 3F<br>
                        9-99 Sakuragaokacho Shibuya-ku
                        <br>Tokyo, Japan 150-0031
                        <br>T/99-9999-9999
                    </p>
                </div>
            </div>
            <a>© Web Entertainment Design Inc.</a>
        </div>
    </section>
</body>

</html>

CSS

@charset "UTF-8";



.wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

header {
    background-color: #cccccc41;
}

#header {
    display: flex;
}

main {
    background-color: #cccccc41;
}

h1 {
    font-size: 2.25rem;
    letter-spacing: 0.3em
}

h2 {
    font-size: 2.25rem;
    letter-spacing: 0.3em
}

footer {
    width: 100%;
}

.headerlists {
    display: flex;
}

.headerlists img {
    width: 100px;
    text-align: left;
    padding: 30px 0px;
    align-items: center;
}

nav {
    display: flex;
    padding: 30px;
}

.headerlist a {
    color: #000;
    padding: 20px;
    text-decoration: none;
}


.headerlist ul {
    display: flex;
    list-style: none;
    gap: 20px;
    align-items: center;
}

.button a {
    text-decoration: none;
    background-color: #000;
    border: 1px solid;
    color: white;
    padding: 20px;
    line-height: 30px;
    display: flex;
    justify-content: center;
    line-height: 50px;
}

.button a:hover {
    opacity: 0.3;
    transition: 0.3s;
}

.bg-img {
    background-image: url(../img/mainvisual.jpg);
    background-size: cover;
    height: 100vh;
}

.newslogo {
    padding-top: 70px;
}

.newslogo p {
    width: 30px;
    background-color: #000;
    display: inline-block;
    position: relative;
}

.newslogo p:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: black;
    border-radius: 1px;
}

span {
    border: 1px solid;
    width: 50px;
    height: 20px;
    padding: 5px;
    margin-left: 10px;
    background-color: black;
    color: white;
}


.title {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.title p {
    padding-top: 15px;
}

.title li {
    border-left: 1px solid;
    list-style: none;
    padding-top: 35px;
    padding-left: 30px;
    justify-content: space-between;
}

.about {
    display: flex;
    width: 100%;
}

.about img {
    width: 55%;
    height: 571px;
    padding-top: 100px;
    object-fit: cover;
}

.abouttext {
    width: 100%;
    padding: 450px 5% 50px 5%;
}

.abouttext a {
    border-bottom: 1px solid;
    padding-bottom: 30px;
}

.abouttext p {
    padding: 80px 0px 0px 0px;
}

.business p {
    border-bottom: 1px solid;
    padding-bottom: 70px;
}

.businessphotos {
    width: 100%;
    display: flex;
    padding: 100px 5% 0px 5%;
}

.businessphoto1 img {
    width: 90%;
    height: 240px;
    padding-right: 30px;
    padding-top: 10px;
    object-fit: cover;
}

.businessphoto1 h3 {
    padding-top: 50px;
}

.businessphoto2 img {
    width: 90%;
    height: 240px;
    padding-top: 10px;
    object-fit: cover;
}

.COMPANY {
    display: flex;
    padding-top: 100px;
}

.companyinfo {
    width: 100%;
    background-color: white;
    padding: 50px;
    margin-bottom: 90px;
}

.companyinfo p {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid;
}

dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
}

dt {
    width: 20%;
    padding-top: 15px;
}


dd {
    width: 80%;
    padding-top: 10px 0px 0px 40px;
}

.companyphoto img {
    width: 100%;
    height: 400px;
    margin: 60px 0px 0px -50px;
    object-fit: cover;
}

.footers {
    display: flex;
    width: 100%;
    padding-top: 30px;
    justify-content: space-between;
    align-items: center;
}

.footerlogo img {
    width: 100px;
}

.footertext p {
    width: 100%;
}

.footer a {
    text-align: right;
    font-size: 15px;
}

@media (max-width:900px) {

    .wrapper {
        max-width: 1000px;
        padding: 0px 3%;
        margin: 0 auto;
    }

    .headerlists {
        display: block;
    }

    .headerlist ul {
        display: flex;
        text-align: left;
        list-style: none;
        gap: 20px;
    }

    .title {
        display: block;
    }

    .title li {
        border-left: none;
        list-style: none;
        padding-top: 35px;
        padding-left: 0px;
    }

    .about img {
        width: 100%;
        height: 400px;
        padding-top: 100px;
        object-fit: cover;
    }

    .about {
        display: block;
        width: 100%;
    }


    .abouttext {
        width: 100%;
        display: block;
        padding: 30px 25% 70px 0px;
    }

    .businessphotos {
        width: 100%;
        display: block;
        padding: 0px;
    }

    .businessphoto1 img {
        width: 100%;
        height: 480px;
        padding-top: 20px;
        object-fit: cover;
    }

    .businessphoto1 h3 {
        padding-top: 10px;
    }


    .businessphoto2 img {
        width: 100%;
        height: 480px;
        padding-top: 20px;
        object-fit: cover;
    }

    .businessphoto2 h3 {
        padding-top: 0px;
    }

    .COMPANY {
        display: block;
        padding-top: 100px;
    }

    dl {
        display: block;
        width: 100%;
        align-items: center;
    }

    dd {
        width: 80%;
        padding-top: 15px;
    }

    .companyphoto img {
        width: 100%;
        height: 400px;
        margin: 0px;
        object-fit: cover;
    }

    .footers {
        display: block;
        width: 100%;
        padding-top: 30px;
    }

    .footertext p {
        width: 50%;
        text-align: left;
        padding: 5px 0px 30px 0px;
    }

}

2 件の回答 2

1

質問に掲載された HTML, CSS からは、問題を再現できません。
以下のように、「プロモーション企画・制作」、「ソーシャル企画・運営」の項目は、他の項目と同様に行頭位置はそろっています。

再現

3
  • 1
    自分の画面だとフル画面で広げた際にズレが発生していたのですが、失礼しました。 dd部分のずれですが:nth-ofーtypeof(){}プロパティを使い無事解決できました。ありがとうございました Commented 5月26日 1:38
  • 再現に条件があるのであれば質問に付与するようにして下さい。また、自己解決したのであれば、回答を自身で投稿ください。 Commented 5月26日 1:51
  • 承知しました!以後気をつけます Commented 5月26日 14:03
0

:nth-of-type(){}プロパティを使い無事に解決しました

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。