Блог

Я бы хотел, чтобы мой навигатор шел по строке 1/3 и столбцу 2/4 и был горизонтальным. Он должен быть рядом с заголовком (слева) в той же строке. По некоторым причинам он находится в другой ячейке по вертикали, и я не могу заставить его работать. Я был бы признателен вам за помощь. Ниже приведено то, что у меня есть. В начале это и не работало.

 lt;!DOCTYPE htmlgt;  lt;html lang="en"gt;  lt;headgt;  lt;titlegt;DSlt;/titlegt;  lt;meta charset="utf-8"gt;  lt;link rel="stylesheet" href="ud.css" type="text/css"gt;   lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;/headgt;  lt;bodygt;  lt;div id="wrapper"gt;  lt;div id="header-nav"gt;  lt;headergt;  lt;h1gt;DSlt;/h1gt;  lt;/headergt;   lt;navgt;  lt;ul class="nav"gt;  lt;ligt;lt;a href="index.html"gt;Homelt;/agt;lt;/ligt;  lt;ligt;lt;a href="assistivetec.html"gt;ATlt;/agt;lt;/ligt;  lt;ligt;lt;a href="contact.html"gt;Contactlt;/agt;lt;/ligt;  lt;ligt;lt;a href="reservation.html"gt;Reservationlt;/agt;lt;/ligt;  lt;/ulgt;  lt;/navgt; lt;/divgt;   lt;div id="photo"gt;    lt;/divgt; lt;/divgt;  

Вот 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;  }