CSS3 : 명명 된 태그의 대상이 작동하지 않습니다.

nav {
  height: 60px;
  border-bottom: 1px solid #eaeaea;
}

.nav-item {
  display: block;
  float: left;
  margin-right: 20px;
  height: 60px;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  color: #666;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  outline: none;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active,
.nav-item.active:hover {
  color: #333;
  border-bottom-color: #b39095;
}

section:target {
  visibility: visible;
  opacity: 1;
}


/* -------------------------------- SECTIONS -------------------------------- */

#sections {
  float: left;
  width: 1200px;
  height: 400px;
}

section {
  position: fixed;
  width: 630px;
  height: 400px;
  float: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear;
}

section p {
  padding-top: 5px;
  line-height: 1.6em;
}

section a {
  color: #b39095;
  text-decoration: none;
}

section a:hover {
  color: #7b618a;
}


/* --------------------------------- OPTIONS -------------------------------- */

fieldset {
  margin: 26px 0 15px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}

input {
  padding-left: 2px;
}

#oxford-app-id {
  width: 80px;
}

#oxford-app-key {
  width: 290px;
}

label {
  padding-left: 5px;
}

<div id="container">
  <header>
    <nav>
      <a id="options" class="nav-item active" href="#section-options">options<br>saved</a>
      <a id="about" class="nav-item" href="#section-about">about</a>
    </nav>
  </header>

  <div id="sections">
    <section id="section-options">
      <p>
        Options
      </p>
    </section>
    <section id="section-about">
      <p>
        About
      </p>
    </section>
  </div>

</div>