为什么我的整个 'grid-column: 3' 显示为一个按钮？

Question

下面是我正在使用的代码。在重新评估代码超过一个小时后，我无法弄清楚为什么我的网格显示中的整个第 3 列没有正确显示。

我搜索了不应该出现的“光标：指针”代码，并尝试使用背景颜色对其进行逆向工程以查找放置问题。谁能解释一下为什么这不起作用？感谢所有反馈！

/* Fund Library Section */
.fund {
  background: #000000;
  padding: 40px 0;
}

.fund__container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.fund__container h1 {
  font-size: 4rem;
  color: #fff;
  grid-column: 1 / span 3;
  justify-self: center;
  padding-bottom: 15px;
}

.row_user {
  grid-column: 1;
  justify-self: center;
  padding-left: 35px;
  background: #fff;
}

.label_title {
  font-size: 25px;
  padding: 0 12px 6px 0;
  color: #fff;
  font-weight: bold;
}

.label {
  font-size: 25px;
  padding: 18px 12px 6px 0;
  color: #fff;
  font-weight: bold;
}

.textbox {
  padding-left: 10px;
}

input[type="text"],
input[type="number"],
select,
textarea {
  width: 55%;
  padding: 6px;
  padding-left: 5px;
  border: 1px solid #4287f5;
  border-radius: 10px;
  box-sizing: border-box;
  resize: vertical;
  font-size: 20px;
}

.row_button {
  background: #fff;
  grid-column: 2;
  justify-self: center;
}

.main_btn {
  font-size: 1.8rem;
  background: #1e3c72;
  padding: 20px 60px;
  border: none;
  border-radius: 4px;
  margin-top: 10rem;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
}

.main_btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main_btn:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fd1d1d;
  transition: all 0.35s;
  border-radius: 4px;
}

.main_btn:hover {
  color: #fff;
}

.main_btn:hover:after {
  width: 100%;
}

.row_fund-frame {
  background: #fff;
  height: 100%;
  grid-column: 3;
  justify-self: center;
}

.static_labels {
  justify-self: center;
}

<!-- Fund Library Section -->
<div class="fund" id="home">
  <div class="fund__container">
    <h1>Fund Library</h1>
    <div class="row_user">
      <div class="label_title">
        <label for="fundticker">Fund Ticker</label>
      </div>
      <div class="textbox">
        <input
          type="text"
          id="fundticker"
          name="fundticker"
          placeholder="Example: AGTHX"
        />
      </div>
      <div class="label">
        <label for="short-low">Short Term Capital Gain (Low) %</label>
      </div>
      <div class="textbox">
        <input
          type="number"
          id="short-low"
          name="short-low"
          placeholder="Enter %..."
        />
      </div>
      <div class="label">
        <label for="short-high">Short Term Capital Gain (High) %</label>
      </div>
      <div class="textbox">
        <input
          type="number"
          id="short-high"
          name="short-high"
          placeholder="Enter %..."
        />
      </div>
      <div class="label">
        <label for="long-low">Long Term Capital Gain (Low) %</label>
      </div>
      <div class="textbox">
        <input
          type="number"
          id="long-low"
          name="long-low"
          placeholder="Enter %..."
        />
      </div>
      <div class="label">
        <label for="long-high">Long Term Capital Gain (High) %</label>
      </div>
      <div class="textbox">
        <input
          type="number"
          id="long-high"
          name="long-high"
          placeholder="Enter %..."
        />
      </div>
    </div>
    <div class="row_button">
      <button class="main_btn"><a href="#">Submit Fund</button>
    </div>
    <div class="row_fund-frame">
      <ol class="static_labels">
        <li class="static_fund">Fund Name</li>
        <li class="static_fund">Fund Ticker</li>
        <li class="static_fund">Short Capital Gains %s</li>
        <li class="static_fund">Long Capital Gains %s</li>
      </ol>
      <ol class="dynamic_labels">
        <li class="dynamic_fund">DB Fund Name</li>
        <li class="dynamic_fund">DB Fund Ticker</li>
        <li class="dynamic_fund">DB Short Capital Gains %s</li>
        <li class="dynamic_fund">DB Long Capital Gains %s</li>
      </ol>
    </div>
  </div>
</div>

Answer 1

更正标记中的错误

正如@connexo 在 cmets 中指出的那样，您在按钮标签内有一个锚标签。更重要的是，您永远不会关闭 A 标记，因此按钮标记会继续包裹第三列的其余部分。这是有问题的行：

<button class="main_btn"><a href="#">Submit Fund</button>

它应该是一个按钮，或者一个锚，而不是两者。