Underlined text despite `text-decoration: none;` and white lines on side of `
` section

Question

What are the white lines on the sides? background-color: black; width: 100% doesn't do anything.
Why are there purple lines underneath the p elements? I've set text-decoration: none; for the container, the class for the group of elements, and the p itself.

If you look closely, here's what I mean:

#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>

text decoration should go to `a` not `p` and `margin:0` to body — Temani Afif, Aug 30 '18 at 22:45
I've added `body` tag within `div` and then `margin: 0` but white lines are still there — Kaiwen Lin, Aug 30 '18 at 22:59
you don't need to add body within div ... you simply need to add margin:0 to body and don't forget to clear your cache — Temani Afif, Aug 30 '18 at 23:01

score 0 · Answer 1 · answered Aug 30 '18 at 22:46

0

You need to style the <a> elements to stop the link underline:

a {
    text-decoration: none;
}

This will fix your error.

answered Aug 30 '18 at 22:46

Jack Bashford

43,180
11
50
79

Underlined text despite `text-decoration: none;` and white lines on side of `` section

1 Answers1

Underlined text despite `text-decoration: none;` and white lines on side of `
` section