带下划线的文本，尽管有“ text-decoration：none;”，而在<div>部分的一侧有白线

Question

1. 侧面的白线是什么？ background-color: black; width: 100%什么也没做。

2. 为什么p元素下方有紫色线条？我已经为容器设置了text-decoration: none;，为元素组设置了类，并且为p设置了自己。

如果仔细观察，这就是我的意思：

#navbar {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: white;
  text-align: right;
}
.nav-link {
  display: inline-block;
  padding: 15px 15px;
  text-decoration: none;
  color: black;
  font-size: 20px;
}    

#projects {
  background-color: black;
  text-align: center;
  width: 100%;
  padding-bottom: 100px;
}

#projects h3 {
  color: white;
  font-size: 25px;
  padding: 50px;
}

#tile-holder {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 300px;
  grid-row-gap: 100px;
  text-decoration: none;
}

.project-tile {
  width: 100%;
  border: 1px solid white;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.project-tile p {
  color: white;
  text-decoration: none;
}

.project-tile img {
  height: 150px;
  width: 288px;
}

 

   

<navbar id="navbar">
  <a href="#welcome-section" class="nav-link">Welcome</a>
  <a href="#projects" class="nav-link">Work</a>
  <a href="#contact" class="nav-link">Contact</a>
</navbar>    

<div id="projects">
      <h3>Some of my work:</h3>
      <div id="tile-holder">
        <a href="https://codepen.io/klin-nj-97/pen/GBzjJE" target="_blank">
          <div id="tribute" class="project-tile">
            <p>Tribute Page</p>
            <img src="https://image.ibb.co/cQGzCp/Screen_Shot_2018_08_28_at_2_33_55_PM.png" alt="tribute-page">
          </div>
        </a>
        <a href="https://codepen.io/klin-nj-97/pen/RBmoRg" target="_blank">
          <div id="survey" class="project-tile">
            <p>Survey Form</p>
            <img src="https://image.ibb.co/n0S6sp/Screen_Shot_2018_08_28_at_9_29_48_PM.png" alt="survey">
          </div>
        </a>
        <a href="https://codepen.io/klin-nj-97/pen/NLPrez" target="_blank">
          <div id="landing" class="project-tile">
            <p>Landing Page</p>
            <img src="https://image.ibb.co/n33hyU/Screen_Shot_2018_08_28_at_9_39_43_PM.png" alt="landing">
          </div>
        </a>
        <a href="https://codepen.io/klin-nj-97/pen/bxEKex" target="_blank">
          <div id="tech" class="project-tile">
            <p>Technical Documentation Page</p>
            <img src="https://image.ibb.co/bN4NyU/Screen_Shot_2018_08_28_at_9_41_29_PM.png" alt="tech-page">
          </div>
        </a>
      </div>
    </div>

Answer 1

您需要设置<a>元素的样式以停止链接下划线：

a {
    text-decoration: none;
}

这将解决您的错误。