嗨，我来帮你搞定这个Banner边框的问题～

问题原因 #

你的.Banner容器用了display: flex和justify-content: center来居中图片，但div作为默认的块级元素，宽度会自动撑满它的父容器（也就是整个页面的宽度），所以边框就跟着页面宽度走了，而不是只包裹里面的图片。

快速修复方案 #

只需要给.Banner类加个属性，让它的宽度刚好贴合内部的图片内容就行，这里有两种简单直接的方式：

方案1：使用fit-content（推荐）

修改你的.Banner CSS代码，新增两个属性：

.Banner {
  display: flex;
  justify-content: center;
  border: 4px hsl(313deg 76% 51%) ridge;
  /* 新增这两行 */
  width: fit-content;
  margin: 0 auto; /* 保持Banner在页面水平居中 */
}

width: fit-content会让容器宽度刚好包裹住里面的图片，再加上margin: 0 auto，就能保持Banner在页面中间，边框也会紧紧裹住图片啦。

方案2：改成行内弹性盒

如果你更习惯行内元素的特性，也可以把display改成inline-flex，然后给它的父容器加居中样式：

.Banner {
  display: inline-flex; /* 把flex改成inline-flex */
  justify-content: center;
  border: 4px hsl(313deg 76% 51%) ridge;
}
/* 给Banner的父div加这个样式 */
.banner-parent {
  text-align: center;
}

对应的HTML也要给父div加类：

<div class="banner-parent">
  <!-- was head -->
  <div class="Banner">
    <img src="C:\Users\piano\Documents\website projects\My website\images\Adrielle’s.png">
  </div>
</div>

额外小提示 #

如果你的图片下方有莫名的小间隙，可以给图片加display: block;，因为图片默认是行内替换元素，可能会有行高带来的间隙：

.Banner img {
  display: block;
}

这样修改后，你的Banner边框就会完美包裹图片，不再撑满整个页面宽度啦😉