你没有提供你的HTML结构，所以这里是一个基本的例子，说明如何使用flexbox来实现最小标记的响应式设计。最终，这将达到一个断点，你将需要使用媒体查询来重新设置那些较小的视口的样式。

.menu {
  display:flex;
  flex-direction:row;
  list-style-type:none;
  gap:1rem;
  width:100%;
}
.menu>div:nth-of-type(7){
  margin-left:auto;
}

<div class="menu">
  <div><a href="#">Home</a></div>
  <div><a href="#">Page1</a></div>
  <div><a href="#">Page2</a></div>
  <div><a href="#">Page3</a></div>
  <div><a href="#">Page4</a></div>
  <div><a href="#">Page5</a></div>
  <div><a href="#">Page6</a></div>
  <div><a href="#">Page7</a></div>
</div>

如果没有html结构，这个问题将很难回答，但是如果它是一个简单的导航，你可以利用:nth-child() CSS选择器(MDN documentation link)，只为示例中的Page5元素提供margin-right样式。

nav a {
  display: inline-block;
}

nav a:nth-child(6) {
  margin-right: 2rem;
}

<nav aria-label="Main navigation">
  <a href="#">Home</a>
  <a href="#">Page1</a>
  <a href="#">Page2</a>
  <a href="#">Page3</a>
  <a href="#">Page4</a>
  <a href="#">Page5</a>
  <a href="#">Page6</a>
  <a href="#">Page7</a>
</nav>