Html CSS响应菜单图标文本

我正在改进我的投资组合网站（www.kikidesign.net），目前正在制作页脚。我正试图使其响应，其中的链接（与图标）将能够保持不变，但将重新安排，以响应浏览器窗口。例如，对于桌面版，它将在一行中，但对于平板版，它将在两行中，每行有两个链接，对于移动版，它将类似于一个列表。但是，我无法将图标和文本放在一个地方。当我移动浏览器窗口时，图标会不断弹出。我该怎么做才能修好它

HTML

我对这两部分做了修改

至于流动电话：

@media (max-width: 480px) {
  #footercontent .ca-menu li {
    position: relative;
    display: inline-block;
    background: #2d1d53;
    padding: 0 20px;
    float: left;
    width: 100%;
}
}

您也可以对其他尺寸进行同样的操作：

@media (min-width: 480px) and (max-width: 720px) {
      #footercontent .ca-menu li {
        position: relative;
        display: inline-block;
        background: #2d1d53;
        padding: 0 20px;
        float: left;
        width: 40%;  
    }
 }

---

嗯……还有一件事，我如何将菜单居中？我检查了边距，但所有内容都显示为自动。在#footercontent.ca菜单中减少宽度而不是100%？我试过了，但没用。

#footercontent .ca-menu {
    width: 100%;
    padding: 0;
    list-style: none;
    margin: 30px auto;
}
#footercontent .ca-menu li {
    position: relative;
    display: inline-block;
    background: #2d1d53;
    padding: 0 20px;
    float: left;
}

@media (max-width: 480px) {
  #footercontent .ca-menu li {
    position: relative;
    display: inline-block;
    background: #2d1d53;
    padding: 0 20px;
    float: left;
    width: 100%;
}
}

@media (min-width: 480px) and (max-width: 720px) {
      #footercontent .ca-menu li {
        position: relative;
        display: inline-block;
        background: #2d1d53;
        padding: 0 20px;
        float: left;
        width: 40%;  
    }
 }