您可以使用display:flex将li并排放置

ul {
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
  display: flex
}

<ul>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

水平菜单可以在Flex和Grid上完成。如果你正在掌握Grid，可以使用grid-auto-flow规则设置一般的流向，或者使用grid-template-columns沿着自动调整/自动填充来声明动态列布局。

ul {
  text-transform: uppercase;
  list-style: none;
  
  display: grid;
  grid-auto-flow: column; /*  first way */
  grid-template-column: repeat(auto-fill, 1fr) /* second way */

  column-gap: 20px;
}

您发布的代码有一些问题;主要原因是您试图将元素定位在其祖先 * 或 * 上声明的网格中-在.logo CSS的情况下-试图将元素定位在grid-column: 2中，尽管该元素不是网格项（元素本身具有display: grid，但显然不能将其放置在自身的第二列中）。
下面的方法（代码中带有解释性注解）似乎可以满足您的要求：

/* removing browser default margins and padding, setting the sizing
   algorithm to border-box; this includes border-sizes and padding
   in the declared width of the elements: */

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo {
  /* you've set display: grid; which means the children of this element
     become grid-items, but this element is not (unless its parent is
     also set to display: grid, but you haven't shown that in your code: */
  display: grid;
  /* setting the same gap as declared for the <ul> element: */
  gap: 20px;
  /* the following rule has no effect, as this element isn't a grid-item: */
  grid-column: span 2;
  justify-content: start;
  /* to create a two-column grid layout, we use the following: */
  grid-template-columns: repeat(2, 1fr);
}

/* this is just so that we can visualise the <img> element's placement,
   adjust to your taste: */

.logo img {
  background-image: repeating-linear-gradient( -45deg, transparent 0 5px, #eee9 5px 7px);
  /* setting the maximum width (in left-to-right, top-to-bottom languages, like Latin and
     its derivatives) of the element to be 100% of the available space: */
  max-inline-size: 100%;
  /* and for the <img> to fill the available space: */
  object-fit: cover;
}

.logo h4 {
  grid-column: 2;
}

ul {
  display: grid;
  /* setting two grid-columns, with the repeat() function; this sets the 2 columns
     to both have the size of 1fr (one fraction of the available space), so that
     they are each equally sized:  */
  grid-template-columns: repeat(2, 1fr);
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
}

nav a {
  background-color: lightskyblue;
  color: #fff;
  display: block;
}

<header>
  <div class="logo">
    <img src="image 17.png" alt="My Learning Journal logo">
    <h4>My learning journal</h4>
  </div>
  <nav>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

值得指出的是，在这种情况下，display: flex可能是首选：
一个二个一个一个
参考文献：

• CSS Logical Properties.
• display.
• gap.
• grid-column.
• grid-template-columns.
• justify-content.
• max-inline-size.
• object-fit.
• repeat().