我正在创建一个react投资组合。我正在努力设计页脚的风格。我只想在上面放Github和LinkedIn的图标。我想让它们并排，并且在你到达页面末尾时位于屏幕底部。目前，这两个图标垂直堆叠在底部，位于页面中间，两行之间有很大的空间。我已经实现了react-bootstrap。
下面是我的页脚组件：

import {AiFillGithub} from "react-icons/ai";
 import {AiFillLinkedin} from "react-icons/ai";

function Footer() {
    return (
        <footer className="justify-content-center font-link">
            <div className="primary flex-row center">
                <ul className="flex-row">
                    <li className="links">
            <a href="https://github.com/PhuongHoang68"
            target="_blank"
            rel="noreferrer"
            >
                <h3 className="icon"><AiFillGithub size="3rem"/></h3>
            </a>
            </li>
            <li className="links">
            <a href="https://www.linkedin.com/in/phuong-hoang-a0b4901a5/"
            target="_blank"
            rel="noreferrer"
            >
                <h3 className="icon"><AiFillLinkedin size="3rem"/></h3>
            </a>
            </li>
            </ul>
            </div>
        </footer>
    )
}

export default Footer;

下面是我的相关css：

.App {
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  background-color: gray;
  text-align: center;
  margin-top: auto;
  padding: 8px;
}
html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-weight: 600;
  line-height: 1.5;
  font-size: 18px;
  background: var(--dark);
  color: var(--light);
  font-family: 'Poiret One', cursive;

}

下面是我的app.js（只有与页脚相关的部分）：

import Footer from './components/Footer';

        <div className="app">
            <Footer />
        </div>

    

export default App;

我已经尝试了许多方法，没有什么是工作。我已经包括上述代码是以上。请帮助我，我真的很感激