JSFiddle - React, Tailwind, and code Playground

HTML

<header>
<h1><a href="index.html"><img src="images/LOGO.png" alt="英語学習講座"></a></h1>
<div id="header_contact"><a href="contact.html"><img src="images/お問い合わせ.png" alt="お問い合わせ"></a></div>
<nav id="global_navi">
    <ul>
        <li class="current"><a href="index.html">HOME</a></li>
        <li><a href="juniorhighschool.html">中学英語</a></li>
        <li><a href="highschool.html">高校英語</a></li>
        <li><a href="college.html">大学英語</a></li>
        <li><a href="businessbasic.html">ビジネス英語基礎</a></li>
        <li><a href="businesshigh.html">ビジネス英語上級</a></li>
        <li><a href="column.html">コラム</a></li>
    </ul>
</nav>

CSS

#global_navi ul{
        width: 100%;
        display: table; 
        table-layout: fixed;
        text-align: center;
    }
    #global_navi ul li{
        vertical-align: middle;
        width: 50%;
        margin: 5px;
        border: solid 1px #000;
    }
    #global_navi ul li a{
        display: block;
        padding: 5px;
        background-color: #007E30;
        color: #4431FF;
        text-decoration: none;
    }