试着用<div class="wrap">做一个导航栏

好的，以下是使用 `<div class="wrap">` 做的一个简单的导航栏的示例：

HTML 代码：

<div class="wrap">
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </nav>
</div>

CSS 代码：

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

nav {
  background: #333;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

li {
  margin-right: 20px;
}

a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
  transition: all 0.3s ease;
}

a:hover {
  background: #fff;
  color: #333;
}

这段代码与之前的代码唯一的区别就是在 `<nav>` 外面套了一个 `<div class="wrap">`，并对其进行了样式设置，使导航栏在页面的中心位置，并限制了其最大宽度。其他的 HTML 和 CSS 代码与之前的示例相同，不再赘述。

需要注意的是，这只是一个简单的示例，实际应用中，需要根据具体需求进行相应的调整和优化。