正如@ray所说，一定有什么东西注入了额外的div（它不是live-server，因为它没有注入div，它只重新加载页面并处理CSS刷新）。
它可能是由浏览器扩展注入的，通常是隐藏的。
检查额外的div上的样式，如果有任何不是来自你的样式，它们一定来自某个地方;你可以检查它们的来源（文件名等），并可能追踪到罪魁祸首。
由于您的样式只使用了一个元素选择器，因此它适用于页面上的所有div，包括额外注入的元素。
旁白：除了基本样式（CSS重置、基本排版等）之外，使用裸元素选择器通常是个坏主意，尤其是在div s这样的通用元素上。

你可以试着把属于你边框的div分类。你也应该相应地编辑你的css文件。所以那些值 不是对每个div都有效。第二个可见边框可以是live服务器自动分配的任何div。我希望我能够传达我的想法。例如，你可以这样写

body {
  background-color: rgb(39, 39, 39);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

img {
  width: 200px;
  /* margin: 20px; */
  align-self: center;
  justify-self: center;
  border: 1px solid white;
  padding: 40px;
  border-radius: 200px;
}

.borders {
  width: 350px;
  height: 400px;
  border: 1px solid white;
  border-radius: 200px;
  padding: 40px;
  display: flex;
}

<div class="borders">
  <img src="picture.jpg" alt="">
</div>

您的CSS代码中可能存在问题。请尝试此操作。
基本上，您只需要将align-items: center;添加到div中

body {
  background-color: rgb(39, 39, 39);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

img {
  width: 200px;
  /* margin: 20px; */
  align-self: center;
  justify-self: center;
  border: 1px solid white;
  padding: 40px;
  border-radius: 200px;
}

div {
  width: 350px;
  height: 400px;
  border: 1px solid white;
  border-radius: 200px;
  padding: 40px;
  display: flex;
  align-items: center; /* add this line to center img vertically */
}

This is the result