Make 2 anchors take up 100% of div

See more:

CSS

HTML

I want the "Home" and "History" tab to take up 100% of the parent div but when I enter 100% in the css it clips out. I also want the overflow to be hidden so making it visible isn't a solution.

HTML:

.bottom {
        background-color: red;
        width: 100%;
        max-width: 3000px;
        max-height: 200px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        border-style: solid;
    }
    .navBottom{
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

    }   
    .navBottom a {
      color: white;
      text-align: center;
      padding: 1vh 50px;
      max-height: 200px;
      text-decoration: none;
      font-size: 1.8vh;
      border-right: 2px solid black;
      text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
    }

CSS:

<pre><div class="bottom">
            <div class="navBottom">
            <a href="../index.html">Home</a>
            <a href="history.html">History</a>
          </div>
            </div>

Full code: https://codepen.io/Marshjek/pen/KQZVBQ


What I have tried:

making padding 100%, making width 100%, tried em, rem, vw and vw