css - CSS |带徽标的页脚

嘿，我刚开始在Work上学习HTML。因此，我开始为一家假公司制作网站，并制作了带有徽标的导航和侧面导航。
但是只有在页脚中，我才遇到问题，导致它不再连续出现。

HTML代码：

<div id="footer">
 <ul class="footer">
  <li class="fuss"><a href="#">AGB</a></li>
  <li class="fuss"><a href="#">Impressum</a></li>
    <div class="wortmarke">
     Caf&eacute; Villa Bernstein
      <p class="copyright">
        &copy; Caf&eacute; Villa Bernstein. All rights reserved.
      </p>
    </div>
  <li class="fuss"><a href="#">Datenschutz</a></li>
  <li class="fuss"><a href="#">Pressenews</a></li>
 </ul>
</div>

CSS：

/* Footer */
ul.footer {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 position: fixed;
 bottom: 0;
 width: 100%;
}

li.fuss {
  float: left;
  width: 10%
}

li.fuss a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.wortmarke {
  color: #ffc995;
  font-size: 150%;
  text-align: center;
  width: 40%;
}

p.copyright {
 font-size: 40%;
 margin: -4%;
 color: white;
}

如您所见，我在Impressum和Datenschutz之间有4个链接（AGB，Impressum，Datenschutz和Pressenews），我想在徽标文本“CaféVilla Bernstein”和“©CaféVilla Bernstein。保留所有权利。”下面添加徽标。问题是当我连续删除“徽标文本”时。
当我添加“徽标文本”时-2个链接“ Datenschutz”和“ Pressenews”跳转到下一行

Here you can see my Problem

现在只有一件事我忘了问。我想要两个链接（AGB和Impressum以及Datenschutz和Pressenews）之间有一个白色边框。当我在Datenschutz的左侧添加border-right: 1px solid white时，缺少白色边框。因此，我添加了border left: 1px solid white。但随后AGB和Impressum与Datenschutz和Pressenews之间的边界变得发胖了。我现在的问题是：如何在同一边框的所有元素之间得到

Fat Border between 2 Navigation

最佳答案

我所做的是：

li.fuss {
  float: left;
  width: 15%
}

现在，所有li和div中层都可以“覆盖”整个页脚（4 * 15％+ 40％= 100％宽度）。

我还在.wortmarke中添加了float：left：

.wortmarke {
  color: #ffc995;
  font-size: 150%;
  text-align: center;
  width: 40%;
  display:inline-block;
  float:left;
}

这样它将与li的其余部分一起漂浮。

最后，完全删除此块：

ul li:nth-child(4), ul li:nth-child(5) {
  float:right;
  margin-right: 20px;
}

由于不必要，无响应且不支持跨浏览器兼容性