老师您帮忙看一下

相关截图：

问题描述：

老师我想问一下怎样才可以实现logo居中呢，为什么我这个并没有效果

相关代码：

<!DOCTYPE html>

<html>
  <head>

    <meta charset="UTF-8">

    <title> </title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 100%;
        height: 300px;
        background-color: #CF4647;
        color: #fff;
      }

      /* 内容盒子居中 */
      .aligncenter {
        width: 1080px;
        /* 清除浮动 */
        overflow: hidden;
        margin: 0 auto;
      }

      /* logo左浮动 */
      .logo {
        float: left;
        margin-top: 20px;
      }

      .logo-img {
        width: 66px;
        margin:0 auto;
      }

      /* nav右浮动 */
      .nav {
        float: right;
        margin-top: 30px;
      }

      .nav a {
        padding: 0 5px;
        font-size: 18px;
        color: #fff;
        text-decoration: none;
      }
    </style>

  </head>

  <body>
    <div class="container">
      <div class="aligncenter">
        <a class="logo">
          gulp官网
          <img class="logo-img" src="https://www.gulpjs.com.cn/img/gulp-white-text.svg" alt="Gulp">
        </a>
        <nav class="nav">
          <a class="nav-link" href="">首页</a>
          <a class="nav-link" href="">中文文档</a>
          <a class="nav-link" href="" target="_blank">入门指南</a>
          <a class="nav-link" href="" target="_blank">API</a>
          <a class="nav-link" href="" target="_blank">插件开发</a>
          <a class="nav-link" href="" target="_blank">常见问题</a>
          <a class="nav-link" href="" target="_blank">使用技巧</a>
        </nav>
      </div>
    </div>
  </body>

</html>