样式表和媒体查询

Question

这是我的代码，我需要帮助来让第一个 ul 和 div 像图片一样显示。

我是编码新手，几天来我一直在努力让它发挥作用。我尝试过应用不同的背景尺寸和颜色，并为 ul 和 li 添加宽度，但似乎不起作用

<header>
    <div class="container-head">
        <div>
                <ul>
                    <li><a href="#">OUTAGE CENTER</a></li>
                    <li><a href="#">PAY YOUR BILL</a></li>
                    <li><a href="#">START, STOP, MOVE SERVICE</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>
        </div>
    </div>
        <div class="wrap">
            <h1>XYZ POWER</h1>
            <nav>
                <ul>
                    <li><a href="index.html">HOME PAGE</a></li>
                    <li><a href="yourhome.html">YOUR HOME</a></li>
                    <li><a href="community.html">COMMUNITY</a></li>
                </ul>
    </nav>
        </div>
</header>

@media screen and (min-width: 1300px) {
    .container-head {
        margin: 0 auto;
    }

    .hover  ul{
        width: 80%;
        margin: 0 auto;
    }

    .flex {
        width: 80%;
        margin: 0 auto;
    }

    main>div ul li {
        width: 13%;
    }

    .flex section:first-child {
        width: 50%;
    }

    .gray {
        width: 35%;
        margin-bottom: 1rem;
    }

    .margin {
        margin-bottom: 1rem;
    }

    footer {
        display: flex;
        justify-content: space-around;
        margin-top: 1rem;
    }

    footer nav li {
        width: 100%;
    }


}

我是编码新手，几天来我一直在努力让它发挥作用。我尝试过应用不同的背景尺寸和颜色，并为 ul 和 li 添加宽度，但似乎不起作用

Answer 1

简化您的代码，并使用弹性盒。

body {
  margin: 0;
  font-family: sans-serif;
}

.container-head {
  background: blue;
  color: white;
  display: flex;
  justify-content: end;
  font-size: 10px;
  padding-right: 1em;
}

.container-head a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  border-left: 1px solid white;
  padding: 3px 1em;
}

.wrap {
  margin: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: blue;
}

.wrap nav {
  display: flex;
  gap: 1em;
}

.wrap nav a {
  color: inherit;
  text-decoration: none;
}

<header>
  <nav class="container-head">
    <a href="#">OUTAGE CENTER</a></li>
    <a href="#">PAY YOUR BILL</a></li>
    <a href="#">START, STOP, MOVE SERVICE</a></li>
    <a href="#">CONTACT US</a></li>
  </nav>
  <div class="wrap">
    <h1>XYZ POWER</h1>
    <nav>
      <a href="index.html">HOME PAGE</a></li>
      <a href="yourhome.html">YOUR HOME</a></li>
      <a href="community.html">COMMUNITY</a></li>
    </nav>
  </div>
</header>