Html 调整浏览器窗口大小时图像碰撞在一起

我的问题是，当我调整浏览器大小时，我的图像会碰撞在一起，而不是停留在它们自己指定的形状中。现实地说，当我调整浏览器大小时，我希望我的图像与浏览器一起移动，但不会相互碰撞。这是代码，高级版谢谢

这是我的HTML

<div id="header-images">

    <img src="images/title.png" id="header_title" class="animated bounceInLeft" alt="Title Header"></img>

    <img src="images/header_interface.png" id="interface" class="animated bounceInRight" alt="Poyan's Interface"></img>
</div>

---

如果您需要更多，请告诉我。

使用此css固定图像宽度，以保持距离且不发生碰撞：

#header-images img {
    Width: 45%;
}

---

这将使两个图像之间保持10%的距离

以下是一个示例，其中两个图像将换行为两行：

---

下面是一个他们滚动到屏幕外的示例：

---

这是一把小提琴，显示你的布局。你有一个非常复杂的布局。疯狂的仓位和利润是怎么回事？总体目标是什么？我之所以给出这些css代码，是因为它们当时正在工作，但在我调整浏览器大小之前，我注意到了这个问题。目标是有两张图片，一张是标题，另一张是并排的肖像照片。当我的浏览器达到最大值时，它们很好，但一旦我开始调整大小，它们就开始相互冲突。而且你还没有告诉我们你希望发生什么。它们要么彼此相邻，在页面外运行，要么需要换行到两行。根据你的选择。这样做会将我的图像拉伸到它们确定的高度和宽度之外。感谢代码，我尝试了这两种方法，它们都会将图像运行到下一行。我不知道如何解释这一点，但“标题”在屏幕左侧，“界面”图像在右侧，当我从左侧调整浏览器大小时，“界面”图像位于另一个图像的顶部。我希望在调整浏览器大小时，两个图像之间仍有空间。我还可以选择在不移动任何东西的情况下保持这两个元素的绝对位置，但我不认为这会对用户友好，这是我的后备选项。我发现，这是一个超级noob错误，但我没有为我的所有元素设置容器div，这就是为什么它们都不正常！感谢您的帮助。请选择一个答案和/或对任何有帮助的进行投票。

#header-images img {
    Width: 45%;
}

#header_title {
    width: 561px;
    height: 248px;
    margin-top: 175px;
    float: left;
}
#interface {
    min-width: 100px;
    width: 338px;
    height: 315px;
    margin-top: 165px;
    float: right;
}

#header_images {min-width: 920px;}