我需要把清單上的項目并排放在一起，但是我做起來有困難。

.logo {
  display: grid;
  grid-column: span 2;
  justify-content: start;
}

.logo h4 {
  grid-column: 2;
}

nav {
  display: grid;
}

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

<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并排放置李的

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上完成。 如果您正在控制網格，請使用網格自動流動規則設置一般流動方向，或者使用網格模板列以及自動適應/自動填充來聲明動態列布局。

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中，盡管該元素不是grid-item(元素本身顯示: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>