How to center Items in react

Question

Im crating a navbar for a cite and currently formatting the page Im pretty new to react so im trying to start with the basics. I am stuck on how to center my NavBarLinks, I have used text-center and position to make the links be in the center of the navbar but if I make the web browser smaller it wont stay in the center. My question is what is the right to center items in react.

import React, { useState } from "react";
import {
  NavbarContainer,
  TopContainer,
  BottomContainer,
  NavbarExtendedContainer,
  NavbarInnerContainer,
  NavbarLinkContainer,
  NavbarLink,
  Logo,
  OpenLinksButton,
  NavbarLinkExtended,
} from "../styles/Navbar.style";
import LogoImg from "../assets/logo.png";

function Navbar() {
  const [extendNavbar, setExtendNavbar] = useState(false);

  return (
    <NavbarContainer extendNavbar={extendNavbar}>
      <NavbarInnerContainer>
        <TopContainer>
          <NavbarLinkContainer>
            <OpenLinksButton
              onClick={() => {
                setExtendNavbar((curr) => !curr);
              }}
            >
              {extendNavbar ? <>&#10005;</> : <> &#8801;</>}
            </OpenLinksButton>
            <Logo src={LogoImg}></Logo>
          </NavbarLinkContainer>
        </TopContainer>
        <BottomContainer>
        <NavbarLinkContainer>
        <NavbarLink to="/"> Home</NavbarLink>
            <NavbarLink to="/products"> Products</NavbarLink>
            <NavbarLink to="/contact"> Contact Us</NavbarLink>
            <NavbarLink to="/about"> About Us</NavbarLink>
        </NavbarLinkContainer>
        </BottomContainer>
      </NavbarInnerContainer>
      {extendNavbar && (
        <NavbarExtendedContainer>
          <NavbarLinkExtended to="/"> Home</NavbarLinkExtended>
          <NavbarLinkExtended to="/products"> Products</NavbarLinkExtended>
          <NavbarLinkExtended to="/contact"> Contact Us</NavbarLinkExtended>
          <NavbarLinkExtended to="/about"> About Us</NavbarLinkExtended>
        </NavbarExtendedContainer>
      )}
    </NavbarContainer>
  );
}

export default Navbar;

Style page

import styled from "styled-components";
import { Link } from "react-router-dom";

export const NavbarContainer = styled.nav`
  width: 100%;
  background-color: black;
  @media (min-width: 700px) {
    height: 80px;
  }
`;

export const TopContainer = styled.div`
  padding-left: 5%;
`;

export const BottomContainer = styled.div`
  padding-right: 50px;
  background-color:salmon;
`;

export const NavbarInnerContainer = styled.div`
  width: 100%;
  height: 80px;
`;

export const NavbarLinkContainer = styled.div`
  display: flex;
`;

export const NavbarLink = styled(Link)`
  color: white;
  font-size: x-large;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  left: 43%;
  top:10%;
  text-decoration: none;
  margin: 10px;
  height: 30px;
  text-align: center;
  @media (max-width: 700px) {
    display: none;
  }
`;

export const NavbarLinkExtended = styled(Link)`
  color: white;
  font-size: x-large;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  margin: 10px;
`;

export const Logo = styled.img`
  @media (min-width: 700px) {
    margin: auto;
  }
  margin: 10px;
  max-width: 180px;
  height: auto;
`;

Answer 1

I really wouldn't recommend using a whole different page for css instead just add your code to index.css, from there you can access your css from any component in your react app.

And to center the NavbarLink you can use flexbox.

Create some css code in index.css:

.navbar__link {
  width: 100%
  display: flex;
  justify-content: center;
}

And add that class in your component element:

<NavbarLinkContainer className='navbar__link'>
  <NavbarLink to="/"> Home</NavbarLink>
  <NavbarLink to="/products"> Products</NavbarLink>
  <NavbarLink to="/contact"> Contact Us</NavbarLink>
  <NavbarLink to="/about"> About Us</NavbarLink>
</NavbarLinkContainer>