求助：大屏幕下Subscribe按钮始终靠左无法居中的问题

你碰到的问题是Subscribe按钮在大屏幕上一直靠左，试了max-width、padding还有z-index都没搞定。看了你的代码和截图，主要问题出在媒体查询语法错误和input-wrapper的布局没做对，下面是具体的修复方案：

问题根源 #

1. 媒体查询全失效：所有@media (min-width:xxx)都没加px单位，浏览器根本不识别这些规则，你写的样式等于白写。
2. input-wrapper没居中：这个容器没有设置居中布局，导致里面的输入框和按钮自然靠左对齐。
3. 按钮样式混乱：小屏幕里给按钮加了position:absolute、极小的宽高，完全破坏了正常布局。

修复步骤 #

1. 修复媒体查询语法 #

把所有@media (min-width:280)这类写法改成@media (min-width:280px)，补全px单位，否则媒体查询不会生效。

2. 重构input-wrapper布局 #

给input-wrapper添加居中样式，同时合理控制宽度，让它在所有屏幕下都能居中：

.input-wrapper {
  max-width: 390px;
  margin: 2rem auto 0; /* 上下间距+水平居中 */
  padding: 0 15px; /* 和container保持一致的左右内边距，适配小屏幕 */
  display: flex; /* 可选：让输入框和按钮并排 */
  gap: 10px;
}

3. 清理无效按钮样式 #

删掉之前媒体查询里对subscribe按钮的不合理设置，比如width:1px、position:absolute这些，按钮直接继承btn-primary的样式即可。

修改后的完整CSS #

/* HERO SECTION */

.hero{
  background: var(--background-primary);
  padding-top: 2rem;
  padding-bottom: var(--py);
  text-align: center;
}

.hero .h1{
  margin-bottom: 1rem;
  line-height: 1.6;
}

.hero b{
  color: var(--accent);
  font-weight: inherit;
}

.hero .h3{
  color: var(--foreground-secondary);
  margin-bottom: 2rem;
}

.hero .btn-group{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  text-align: center;
}

.hero .right{
  display: none;
}   

.container{
  margin-inline: auto;
  margin: auto;
  padding: 0 15px;
}

.btn{
  min-width: 10rem;
  border-radius: 100px;
}

.btn-primary{
  background: var(--accent);
  color: var(--white);
  padding: 0.6875rem 1.1875rem;
}

.btn-primary:hover{
  background: var(--foreground-secondary);
  color: var(--action-primary);
}

.btn-secondary{
  background: var(--action-secondary);
  color: var(--foreground-secondary);
  padding: 0.5rem 1rem;
  border: 3px solid var(--foreground-tertiary);
}

.btn-secondary:hover{
  border-color: var(--accent);
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

html {
  font-family: "Inter", sans-serif;
  font-size: var(--fs-base); /* base font-size (13.6px) */
  line-height: 1.8;
}

/* 修复后的Subscribe区域样式 */
.input-wrapper {
  max-width: 390px;
  margin: 2rem auto 0;
  padding: 0 15px;
  display: flex;
  gap: 10px;
}

.input-field {
  flex: 1;
  padding: 0.6875rem;
  border-radius: 100px;
  border: 1px solid var(--foreground-tertiary);
}

.subscribe {
  /* 继承btn-primary样式，无需额外混乱设置 */
}

/* 修复单位后的媒体查询，保留必要断点 */
@media (min-width: 575px) {
  .input-wrapper{ 
    max-width: 450px;
  }
}

@media (min-width: 768px) {
  .hero .right{
    display: block; /* 大屏幕显示右侧头像 */
  }
  .input-wrapper{ 
    max-width: 500px;
  }
}

@media (min-width: 1280px) {
  .input-wrapper{ 
    max-width: 550px;
  }
}

额外说明 #

• 如果不需要输入框和按钮并排，可以去掉input-wrapper里的display:flex和gap，把输入框和按钮改成块级元素，各自居中。
• 之前的多个重复媒体查询可以合并，减少冗余代码，比如把相同宽度设置的断点合并在一起。

内容的提问来源于stack exchange，提问作者Buse Nur Çetin