Grid. Horizontal nav is in the wrong cell

I would like my nav to go on row 1/3 and column 2/4 and be horizontal. It should be next to the header (left side) on the same row. For some reasons, it is on a different cell in vertical, and I cannot make it work. I would appreciate your help. Below is what I have. In the beginning of this and not working.

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <title>DS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="ud.css" type="text/css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div id="wrapper">
    <div id="header-nav">
    <header>
        <h1>DS</h1>
    </header>

    <nav>
        <ul class="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="assistivetec.html">AT</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="reservation.html">Reservation</a></li>
        </ul>
    </nav>
</div>

     <div id="photo">
       
    </div>
</div>

Here is the CSS:

 *   {
   box-sizing: border-box;
}

  .nav 
       {
            text-align: center;
            display: inline-block;
            height: 100%;
            line-height: 4rem;
            display: flex;
            justify-content: center;
        }

.header-nav 

        {   
            display: flex;
            flex-direction: row;
        }

h1 
        {
      
            overflow: hidden;
        }

 ul 
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
          
        }

 li 
       {
              float: left;
              border-right:1px solid lightgray;
              border-left:1px solid lightgray;
              border-radius: 15px;
              font-family: "Google Sans",Roboto,Arial,sans-serif;
        }

 body     
        {

              font-family: "Google Sans",Roboto,Arial,sans-serif;
        }

   li a     
        {
              color: black;
              display: block;
              padding: 8px;
              background-color: white;
              text-decoration: none;
              border-radius: 25px;
        }

  #wrapper
        {
            display: grid;
            grid-template: 
                                            "title nav nav"
                                            "future future future"
                                            width: 90%;
                                            margin: auto;
                                            grid-template-columns: 100px 1000px 80px;
                                            grid-template-rows: 70px 1000px 1fr;
                                            box-shadow: 3px 3px 3px darkblue;
        }
     h1
        { grid-area: title; 
          grid-row: 1/2 ; grid-column: 1/1
        }
    nav
        { grid-area: nav;
          grid-row: 1/2; grid-column: 2/3;
         }