内联块，文本对齐和列表式HTML CSS存在多个问题

Question

我目前有一些问题。我在代码的某个地方找到了一些覆盖display: inline-block和text-align:center以及list-style:none;的内容，但我似乎无法弄清楚为什么它不是{＆1}。工作。我希望标题中的“主页”，“关于”和“联系人”列表不具有项目符号并且不在一起，而不是相互堆叠。另外，我希望整个页面居中。感谢您提供的任何帮助。

这里是所有的html

＆＃13;

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Raleway: 300,400,700,900');
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}


/* header
    ============ */

header {
  /* position: absoulte; */
  margin-top: 1em;
}

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

nav li {
  display: inline-block;
  margin: 1em;
}

＆＃13;

<header>
  <img src="http://localhost:7879/img/logo.jpg" alt="Creative inc. logo" class="logo">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="home-hero">
  <h1 class="title">Making things look great
    <span>for companies who make great stuff</span>
  </h1>
  <a href="#" class="button button-accent">See Our Work</a>
</section>


<section class="home-about">

  <div class="home-about-textbox">
    <h1>Who we are</h1>
    <p>Lorem ipsum dolor sit amet, mel sanctus sensibus incorrupte at, ad homero aperiri duo, ad quo vidit impedit.</p>
    <p>Autem dolore in his. Essent everti appellantur te vel, cibo dignissim nam ex.</p>
  </div>

</section>


<section class="portfolio">
  <h1>Some of our work</h1>

  <!-- portfolio item 01 -->
  <figure class="port-item">
    <img src="" alt="portfolio item">
    <figcaption class="port-desc">
      <p>Project: title</p>
      <a href="#" class="button button-accent button-small">Project   details</a>
    </figcaption>
  </figure>

  <!-- portfolio item 02 -->
  <figure class="port-item">
    <img src="" alt="portfolio item">
    <figcaption class="port-desc">
      <p>Project: title</p>
      <a href="#" class="button button-accent button-small">Project details</a>
    </figcaption>
  </figure>

  <!-- portfolio item 03 -->
  <figure class="port-item">
    <img src="http://localhost:7879/img/portfolio-03.jpg" alt="portfolio item">
    <figcaption class="port-desc">
      <p>Project: title</p>
      <a href="#" class="button button-accent button-small">Project details</a>
    </figcaption>
  </figure>

  <!-- portfolio item 04 -->
  <figure class="port-item">
    <img src="http://localhost:7879/img/portfolio-04.jpg" alt="portfolio item">
    <figcaption class="port-desc">
      <p>Project: title</p>
      <a href="#" class="button button-accent button-small">Project details</a>
    </figcaption>
  </figure>

  <!-- portfolio item 05 -->
  <figure class="port-item">
    <img src="http://localhost:7879/img/portfolio-05.jpg" alt="portfolio item">
    <figcaption class="port-desc">
      <p>Project: title</p>
      <a href="#" class="button button-accent button-small">Project details</a>
    </figcaption>
  </figure>

  <!-- portfolio item 06 -->
  <figure class="port-item">
    <img src="http://localhost:7879/img/portfolio-06.jpg" alt="portfolio item">
    <figcaption class="port-desc">
      <p>Project: title</p>
      <a href="#" class="button button-accent button-small">Project details</a>
    </figcaption>
  </figure>
</section>


<footer>

  <div class="col-3">

    <p>Per et tale ignota evertitur, vix ex inani dolore definiebas.</p>
  </div>

  <div class="col-1">
    <ul class="unstyled-list">
      <li><strong>Shoreditch</strong></li>
      <li>Shoreditch</li>
      <li>Woke retro</li>
      <li>Readymade</li>
      <li>Scenester</li>
    </ul>
  </div>

  <div class="col-1">
    <ul class="unstyled-list">
      <li><strong>Shoreditch</strong></li>
      <li>Shoreditch</li>
      <li>Woke retro</li>
      <li>Readymade</li>
      <li>Scenester</li>
    </ul>
  </div>

  <div class="col-1">
    <ul class="unstyled-list">
      <li><strong>Shoreditch</strong></li>
      <li>Shoreditch</li>
      <li>Woke retro</li>
      <li>Readymade</li>
      <li>Scenester</li>
    </ul>
  </div>

</footer>

＆＃13;

＆＃13;

＆＃13;