JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html lang="en">
    	<body>
    		<div id="main_navigator">
                <div id="main_navigator_upper">          
                    <a id="main_navigator_logo" src="/"></a>
                    <ul id="main_navigator_r1">
                        <li>
                            <a class="main_nav_btn">BTN 1</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 2</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 3</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 4</a>
                        </li>
                        <li id="main_navigator_l1">
                            <div id="main_navigator_s1"></div>
                        </li>
                <li>
                  <ul id="main_navigator_regbox">
                    <li>
                      <p id="regbox_signin">sign in</p>
                    </li>
                    <li>
                      <div id="main_navigator_regbox_s1"></div>
                    </li>
                    <li>
                      <a id="regbox_signup" href="sign_up">sign up</a>
                    </li>
                  </ul>
                          </li>
                    </ul>
                </div>
            </div>
    	</body>
    </html>

CSS

body {
	margin: 0;
	overflow-y: scroll;
}

#main_navigator {
	position: fixed;
	background-color: black;
	width: 100%;
}
#main_navigator_upper {
	position: relative;
	display: flex;
	flex-direction: row;
}
#main_navigator_logo {
	width: 416px;
	height: 120px;
	background-color: white;
}
#main_navigator_r1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 0;
	padding-right: 5%;
	text-align: center;
	margin-top: 0px;
	height: 98px;
	list-style-type: none;
}
#main_navigator_r1 li {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
}
#main_navigator_l1 {
	flex-grow: 0.1 !important;
}
#main_navigator_r1 li .main_nav_btn {
	color: white;
	display: block;
	height: 100%;
	font-family: "nexa_bold";
	font-size: 0.9em;
	text-decoration: none;
}
#main_navigator_s1 {
	display: inline-block;
	width: 2px;
	height: 35px;
	background-color: #B28039;
}
#main_navigator_regbox {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#main_navigator_regbox li {
	display: inline-block;
	flex-grow: 0.1;
	flex-shrink: 0.1;
}
#regbox_signin {
	display: block;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	color: #B28039;
	font-size: 0.9em;
	font-family: "nexa_light";
}
#regbox_signup {
	display: block;
	white-space: nowrap;
	text-decoration: none;
	color: white;
	font-size: 0.9em;
	font-family: "nexa_light";
}
#main_navigator_regbox_s1 {
	display: inline-block;
	width: 1.4px;
	height: 13.5px;
	background-color: white;
}