Html 当我将图像和iframe视频调整为较小的尺寸时，它们会落在jumbotron之外。我如何防止这种情况？

所有的东西似乎都放在了我想要的地方，但是图像和视频会在较小的尺寸上与jumbotron重叠。我查看了其他帖子，没有发现任何有用的东西来回答我的问题。我应该澄清一下，它出现在jumbotron的右侧

身体{
利润率：20px；
}
#img_位置{
位置：相对位置；
左：14%；
填充：15px；
最大宽度：100%；
}
#巨无霸
{
背景色：#bfff80；
字体系列：“Cinzel”，衬线；
最小宽度：100%；
}
.gw_vid{
位置：相对位置；
垫面：5%；
最大宽度：32%；
保证金：0自动；
}

乔治华盛顿
美国第一任总统

我把你的代码放进了Codepen，它告诉我我不需要标签，首先在我取出样式标签后，我运行了代码，它看起来非常好。我相信这里的解决方案是为CSS创建一个新文件，然后在头部链接它们。如果你不知道怎么做，下面是代码

<link rel="stylesheet" type="text/css" href="nameoffyourfile.css"


        **HTML**
<div class="container box ">
<div id="jumbo" class="jumbotron box">
<h1 style="text-align: center">George Washington</h1>
<h4 style="text-align:center">The first President of the Untited States of 
America</h4>
<img id="img_position" src="http://projectmanagementhacks.com/wp-
content/uploads/2015/03/George-Washington-Success-Principles.jpg">
<div class="gw_vid">
  <iframe width="350px" height="350px" 
src="https://www.youtube.com/embed/thin1LeCrxY" target="blank"></iframe>
  </iframe>
</div>
</div>

  **CSS**

body {
margin: 20px;
}

#img_position {
position: relative;
left: 14%;
padding: 15px;
max-width: 100%;
}

#jumbo {
background-color: #bfff80;
font-family: 'Cinzel', serif;
min-width: 100%;
}

.gw_vid {
 position: relative;
 padding-top: 5%;
 max-width: 32%;
 margin: 0 auto;
 }

---

由于您使用的是引导，您可以在YouTube视频中使用本机响应嵌入：
我在img、视频和jumbotron上尝试了最大高度、最小高度、最小宽度和最大宽度。什么都不管用。我已经尝试了所有的方法，直到我发布了这个问题。您可以查看我的代码并告诉我是否有问题。当高度是我遇到问题的宽度时，是否有理由更改高度？您应该查看引导的“img响应”类。此外，视频和img元素上的自定义css似乎也会引起一些问题——如果您想在图像上使用左/右填充，我会研究“边框框”框的大小，以便将其包含在宽度中我已经删除了视频的所有尺寸，并在没有尺寸的情况下将其设置为最小尺寸，我仍然存在相同的问题。我想我需要研究一下jumbotron的尺寸。我重新定位了我的图片，因为它没有正确居中，并且它至少保持在jumbotron中，但没有居中。是的，我在编写代码时将样式表、标题和html都分开。我会运行你的代码。谢谢你的帮助，谢谢菲利普。我一直把头撞在墙上，想知道该怎么办。这非常有效。