我如何使我的div在我的标题下对齐?

How can I make my documents and my video align under my bootstrap header jumbotron horizontally? I just want the content to be in line with the header directly under it.

我如何使我的文件和我的视频对齐在我的引导头?我只是想让内容与标题直接在它下面。

CSS

.container2 {
      display: flex;
      flex-flow: row nowrap; /* Align on the same line */
      justify-content: space-between; /* Equal margin between the child elements */
      }

HTML

<div class="container2">
         <div class="left">
            <p  style=" margin: 12px auto 6px auto; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; display: block;"></p>
            <iframe class="scribd_iframe_embed" src="https://www.scribd.com/embeds/344420651/content?start_page=1&view_mode=scroll&access_key=key-8enfvS2L2K0nh24zmVG8&show_recommendations=true" data-auto-height="false" data-aspect-ratio="0.7729220222793488" scrolling="no" id="doc_97914" width="400" height="400" frameborder="0"></iframe>
         </div>
         <div class="center">
            <p  style=" margin: 12px auto 6px auto; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; display: block;"></p>
            <iframe class="scribd_iframe_embed" src="https://www.scribd.com/embeds/344420651/content?start_page=1&view_mode=scroll&access_key=key-8enfvS2L2K0nh24zmVG8&show_recommendations=true" data-auto-height="false" data-aspect-ratio="0.7729220222793488" scrolling="no" id="doc_97914" width="400" height="400" frameborder="0"></iframe>
         </div>
         <div class="right">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/6O7VlTCPYVU" frameborder="0" allowfullscreen></iframe>
         </div>
      </div>

Full Site code - https://jsfiddle.net/1mx7ygr1/

完整的站点代码- https://jsfiddle.net/1mx7ygr1/。

I'm aware that I'm using bootstrap and using other ways of coding the page and the webpage is not fully responsive. However, trying to get the basics on point and get a basic understand than develop my skills as I've only recently started.

我知道我使用的是bootstrap，并使用其他方法来编写页面，而网页没有完全响应。然而，试着从基本点入手，得到一个基本的理解，而不是像我最近刚开始的那样发展我的技能。

1 个解决方案

#1

There is an unecessary paragraph tag in the .left and .center div. These paragraphs are empty. Also they are adding space.

在.left和.center div中有一个unecessary段落标记。这些段落是空的。他们也在增加空间。

Change them to display:none or remove (if you'd like)

将它们更改为显示:none或remove(如果您愿意)

.left p,.center p{
  display:none !important;
}

fiddle is here

小提琴在这里

#1