Блог

это первый раз, когда я пытаюсь реагировать. Ниже приведен код, который я использую в Navbar.js файл

 import React from "react"
import {NavLink} from "react-router-dom"


const Navbar =() => {
  return(
    <>

    <div ClassName="container-fluid nav_bg">
      <div ClassName ="row">
        <div ClassName ="col-10  mx-auto">

      <nav ClassName="navbar navbar-default navbar-brand navbar-expand-lg navbar-light bg-light">
        <div ClassName="container-fluid">
        <a ClassName="navbar-brand" to="/">Water Front!</a>
        <button ClassName="navbar-toggler" 
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent"
            aria-expanded="false" 
            aria-label="Toggle navigation">
            <span ClassName="navbar-toggler-icon"></span>
        </button>
        <div ClassName="collapse navbar-collapse" 
                    id="navbarSupportedContent">

      <ul ClassName="navbar ms-auto mb-2 mb-lg-0">
      
        <li ClassName="nav-item"><NavLink activeClassName="menu_active" ClassName="nav-link active" aria-current="page" to="/">Home</NavLink></li>

        <li ClassName="nav-item"><NavLink ClassName="nav-link" to="/about">About</NavLink></li>
      
        <li ClassName="nav-item"><NavLink ClassName="nav-link" to="/service">Service</NavLink></li>
      
        <li ClassName="nav-item"><NavLink ClassName="nav-link" to="/gallery">Gallery</NavLink></li>
      
        <li ClassName="nav-item"><NavLink ClassName="nav-link" to="/price">Price</NavLink></li>
      
        <li ClassName="nav-item"><NavLink ClassName="nav-link" to="/contact">Contact</NavLink></li>

      </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>
    </div>
  </>

  )

}

export default Navbar;
 

Проблема в том, что я получаю следующий вывод на экране по сравнению с желаемым выводом. Проверьте изображение.
Желаемый результат — все пункты меню, которые должны быть написаны справа, и название компании с левой стороны с некоторым отступом с обеих сторон. Вся навигационная панель должна быть в одну строку. но я получаю это в одной колонке