Anchor tags seemingly linked to ids properly but not working

Question

I haven't been able to figure out why this is happening, i have my navigation bar working fine and the anchor links themselves are actual links, but when i click them the page either reloads or goes completely white screen.

Here's a link to the page, only included the ul itself and the attached css

http://s.codepen.io/boomerang/7e523d9a7efa11d1199da37a32c176ac1483413552850/index.html

.menu {
  position: fixed;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, 0);
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3f2e38;
  border-radius: 0px 0px 30px 30px;
  box-shadow: 0px 2px 4px #3f2e38;
}
ul.menu li a {
  width: 100px;
  height: 40px;
  font-family: dosis;
  display: inline-block;
  color: #e6e1ea;
  text-align: center;
  transition: .3s;
  font-size: 20px;
}
ul.menu li {
  float: left;
}
ul.menu li a:hover {
  background-color: #59404f;
}
/*header text*/

.texttwo {
  font-family: dosis;
  font-size: 72px;
}

<header>
  <nav>
    <ul class="menu">
      <li><a href "#home">Home</a>
      </li>
      <li><a href "#gallery">Gallery</a>
      </li>
      <li><a href "#portfolio">Portfolio</a>
      </li>
      <li><a href "#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<div>
  <h1 class="texttwo" id="gallery">Gallery</h1>
</div>

<div>
  <h1 class="texttwo" id="portfolio">Portfolio</h1>
</div>

<div>
  <h1 class="texttwo" id="contact">Contact</h1>
</div>

Answer 1

You are missing = sign <a href="#"></a>

.menu {
  position: fixed;
  z-index: 999;
  left: 50%;
  transform: translate(-50%, 0);
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3f2e38;
  border-radius: 0px 0px 30px 30px;
  box-shadow: 0px 2px 4px #3f2e38;
}
ul.menu li a {
  width: 100px;
  height: 40px;
  font-family: dosis;
  display: inline-block;
  color: #e6e1ea;
  text-align: center;
  transition: .3s;
  font-size: 20px;
}
ul.menu li {
  float: left;
}
ul.menu li a:hover {
  background-color: #59404f;
}
/*header text*/

.texttwo {
  font-family: dosis;
  font-size: 72px;
}

<header>
  <nav>
    <ul class="menu">
      <li><a href="#home">Home</a>
      </li>
      <li><a href="#gallery">Gallery</a>
      </li>
      <li><a href="#portfolio">Portfolio</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<div>
  <h1 class="texttwo" id="gallery">Gallery</h1>
</div>

<div>
  <h1 class="texttwo" id="portfolio">Portfolio</h1>
</div>

<div>
  <h1 class="texttwo" id="contact">Contact</h1>
</div>