html - CSS Bootstrap 对齐

Question

我正在制作一个网页，但我似乎遇到了对齐问题。下面一行比上面一行缩进得更多。有没有什么简单的方法可以解决这个问题而无需重做我的整个代码？我感觉这只是我错过的一些填充，但我找不到它。

如有任何帮助，我们将不胜感激。

昨天刚开始学习 CSS。

代码:

<div class="container">
    <div class="row" style="height: 395px">
        <div class="col-sm8" style="background-color: lightgrey">
            <iframe src="https://api.kaltura.nordu.net/p/261/sp/26100/embedIframeJs/uiconf_id/14973541/partner_id/261?iframeembed=true&playerId=kaltura_player&entry_id=0_jv96e7co&flashvars[streamerType]=auto" width="662+padding" height="395+padding" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" style="padding-left:25px;"></iframe>

        </div>

        <div class="col-sm4" style="background-color: lightgrey; ">
            <div class="imageContainer" style="padding-left: 30px">
                <img src="Fronter_Canvas.png" style="height: 395px; align-content: center; padding-left: 20px; padding: 10px;">
                <div class="dato">1.Juni.2018</div>
            </div>    
        </div>     
    </div>


<div class="container-fluid"  style="padding-top: 10px; height:380px">
    <div class="row" style="background-color: lightgrey; height: inherit; width: 960px">
        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                <h4><b>Topp 5 Spørsmål.</b></h4>
                <p>For deg som er ny til Canvas.</p>
            </div>
            </div>
        </div>

    <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px; ali">
                <div class="container">
                    <h4><b>Fakultetskontakt</b></h4>
                    <p>Finn din Canvas kontakt på ditt institutt.</p>
                </div>
            </div>
       </div>

    <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Kurskontakt</b></h4>
                    <p>Få en oversikt over kursene.</p>
                </div>
            </div>
        </div>

    <div class="col-3">
                <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Innføringsplan av Canvas</b></h4>
                    <p>Hvordan canvas skal rulles ut.</p>
                </div>                      
            </div>
        </div>
    </div>
</div>

.containter{
    padding: 2px 16px;
}

.imageContainer{
    position: relative;
    text-align: center;
}

.dato{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    padding-top: 250px;
    font-family: sans-serif;
    font-style: normal;
    padding-left: 30px
}

.card{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    height: 350px;
    float: left;
    padding: inherit;
    margin: inherit;
    padding: 10px;
    display: inline-block;
}

.col-3{
    height: 250px;
    padding: 10px;
}

.row{
    height: 250px    
}

My result.

Answer 1

Div 没有先关闭 container 还有 class 名称错误 col-sm8 col-sm-8 col-sm-4 或 col-3 到 col-md,lg,sm,xs,-3

<div class="container">
    <div class="row" style="height: 395px">
        <div class="col-sm8" style="background-color: lightgrey">
            <iframe src="https://api.kaltura.nordu.net/p/261/sp/26100/embedIframeJs/uiconf_id/14973541/partner_id/261?iframeembed=true&playerId=kaltura_player&entry_id=0_jv96e7co&flashvars[streamerType]=auto" width="662+padding" height="395+padding" allowfullscreen webkitallowfullscreen mozAllowFullScreen frameborder="0" style="padding-left:25px;"></iframe>

        </div>

        <div class="col-sm4" style="background-color: lightgrey; ">
            <div class="imageContainer" style="padding-left: 30px">
                <img src="Fronter_Canvas.png" style="height: 395px; align-content: center; padding-left: 20px; padding: 10px;">
                <div class="dato">1.Juni.2018</div>
            </div>
        </div>
    </div>
</div>


<div class="container-fluid" style="padding-top: 10px; height:380px">
    <div class="row" style="background-color: lightgrey; height: inherit; width: 960px">
        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Topp 5 Spørsmål.</b></h4>
                    <p>For deg som er ny til Canvas.</p>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px; ali">
                <div class="container">
                    <h4><b>Fakultetskontakt</b></h4>
                    <p>Finn din Canvas kontakt på ditt institutt.</p>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Kurskontakt</b></h4>
                    <p>Få en oversikt over kursene.</p>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card">
                <img src="Avatar_01.png" alt="Image" style="width: 200px;">
                <div class="container">
                    <h4><b>Innføringsplan av Canvas</b></h4>
                    <p>Hvordan canvas skal rulles ut.</p>
                </div>
            </div>
        </div>
    </div>
</div>