【XDデータからコーディング】要素をデザイン通りに並べられない

前提・実現したいこと

WebサイトをAdobe XDデータを見ながらコーディングしています。
お問い合わせフォームのようなものを作成しているのですが、デザイン通りに要素を並べられていません。

目指しているデザイン

コーディング中画面

発生している問題・エラーメッセージ

要素をうまく並べられません。

該当のソースコード

HTML
<div class="line" id="contentLine"></div>

        <p class="consultation">ご相談内容種別</p>

        <!--必須-->
        <div class="boxSquare"><p>必須</p></div>

        <!--チェックボックス-->
        <input type="checkbox" id="checkbox_A" name="checkbox01" checked="checked">
        <label for="chkboxA" class="checkbox_1">チェックボックス1</label>
        <input type="checkbox" id="checkbox_B" name="checkbox01">
        <label for="chkboxB" class="checkbox_1">チェックボックス2</label>
        <input type="checkbox" id="checkbox_C" name="checkbox01">
        <label for="chkboxC" class="checkbox_1">チェックボックス3</label>

        <!--罫線-->
        <div class="line" id="contentLine"></div>

        <p class="consultation">ご相談内容</p>

        <!--必須-->
        <div class="boxSquare"><p>必須</p></div>
        
        <!--ご相談内容テキストエリア-->
        <div class="textarea_1"><textarea name="consultationBox"></textarea></div>

        <!--罫線-->
        <div class="line" id="contentLine"></div>

CSS
　#contentLine {
    margin: auto;
    width: 1180px;
    height: 1px;
    display: inline-block;
    margin-left: 93px;
    background: #B9B9B9;
}

.consultation {
    display: inline;
    font-size: 16px;
    font-family: YuGothic;
    font-weight: bold;
}

.boxSquare {
    display: inline-block;
    width: 38px;
    height: 20px;
    background: #D73635;
    border-radius: 5px;
    line-height: 23px;
}

.boxSquare p{
    text-align: center;
    font-size: 12px;
    font-family: YuGothic;
    font-weight: bold;
    padding: 0;
    margin: 0;
    color: #fff;
}

input[type=checkbox] {
    display: none;
}

.checkbox_1 {
    box-sizing: border-box;
    display: block;
    cursor: pointer;
    position: relative;
    padding: 5px 30px;
    width: auto;
    margin-left: 93px;
}

.checkbox_1::before {
    display: block;
    border: 1px solid #A8A8A8;
    border-radius: 3px;
    content: '';
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50px;
    width: 16px;
    background: #fff;
}

.checkbox_1::after {
    display: block;
    border-right: 3px solid #266AAD;
    border-bottom: 3px solid #266AAD;
    content: '';
    width: 5px;
    height: 9px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50px;
    transform: rotate(45deg);
}

input[type=checkbox]:checked + .checkbox01::after {
    opacity: 1;
}

.checkbox_1:hover {
    background: #F5F5F5;
}

textarea {
    display: block;
    width: 809px;
    height: 160px;
    resize: none;
}

.textarea_1 {
    text-align: right;
}