javascript - Instafeed/html 响应部分

Question

我的网站上有一个 Instagram 部分，它按我想要的方式工作，但我想在它的右侧添加另一个带有背景颜色和文本的 div，这样它看起来像是网格的一部分，但实际上不是!

我已经设置好了，但是当缩放浏览器时，它根本不会保留它，有人能帮我吗？这是我的 HTML 和 CSS，还有一张关于它应该是什么样子的图片。

.Container-Instagram {
  margin-top: 5%;
  width: 85%;
}
.H1-Instagram {
  font-size: 48px;
  color: #d7aa44;
}
.Instagram-Title {
  background-color: #f8db74;
  position: absolute;
  margin-top: 204px;
  margin-left: 792px;
  padding: 30px;
  width: 50%;
  height: 187px;
  text-align: center;
}
.cross-text2 {
  display: inline-block;
  position: relative;
}
.cross-text2::before {
  background-color: #d7aa44;
  content: "";
  height: 4px;
  position: absolute;
  top: 37px;
  left: 4px;
  width: 100%;

  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.Container-Instagram a {
  border: 5px solid #fff;
  display: inline-block;
  line-height: 0;
  width: 20%;
}
.Container-Instagram #instafeed a:first-child {
  margin-left: 40%;
}
.Container-Instagram #instafeed a:nth-child(8n + 8) {
  margin-left: 0.05%;
}

.instagram-section {
  width: 75%;
}

<div class="Container-Instagram">
            <div class="Instagram-Title"><h1 class="H1-Instagram">Get On The <span class="cross-text2">Insta</span> Gram</h1></div>
            <div id="instafeed" class="instagram-section"></div>
        </div>

由于 JS，该代码段不起作用，但它仅用于显示我的代码。这是最终结果的样子(红色方 block 是 instagram 帖子): Image Example

如果您想更好地理解我的意思，这是我用来开发的网址 http://s749376357.websitehome.co.uk/ :D 谢谢

Answer 1

删除 .Instagram-Title 上的 margin-left:792px; 替换为 right:100px; 然后添加 position :relative; 到 .Container-Instagram 这将在您调整大小时跟随 - 但是您仍然需要做一些工作以使其完全响应。