Как сохранить расстояние между: значок «Домой», текст «Домой», значок стрелки, используя CSS

Question

Я работаю над проектом React, в котором я работаю над Navbar, в этом Navbar я работаю над экраном Mobile Sm. На этом Sm мобильном экране значок «Домой», текст, значок стрелки вниз идет рядом. Я пытаюсь поместить некоторое пространство между ними, но это не работает. Я пытаюсь использовать CSS и flex, но он не работает, поэтому некоторые, пожалуйста, помогите мне добиться этого. И это проект React.

Это мой код

Это Navbar. js

import React from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';

function Navbar() {
    return (
        <div className='container p-0'>
            <div className='row no-gutters'>
                <div className='col-12'>
                    <nav className="navbar navbar-expand-lg navbar-light">
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className='image'>
                            <img className='logostyle' src='/assets/images/logo.png' alt='logo'></img>
                        </div>
                        <div className="collapse navbar-collapse" id="navbarNav">
                            <ul className="navbar-nav">
                                <li className="nav-item active">
                                    <Link className='nav-link one' to='/'>
                                        <i className="fas fa-home"></i>
                                        Home
                                        <i className="fas fa-caret-down"></i>
                                    </Link>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" href="#">Features</a>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" href="#">Pricing</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    )
}

export default Navbar

Это Navbar. css

@media only screen and (min-width: 0px) and (max-width: 576px) {
    .logostyle {
        width: 150px;
    };
    .one {
        padding: 0.65rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: black;
    }
}

Это приложение. js

import React from 'react';
// import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Navbar from './Components/Navbar/Navbar';
import Home from './Pages/Home/Home';


function App() {
  return (
    <div className="App">
      <Router>
        <Navbar></Navbar>
        <Switch>
          <Route exact path='/'><Home></Home></Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

Если я не совсем уверен с моим сомнением, пожалуйста, оставьте комментарий

Answer 1

Вы можете использовать Bootstrap интервал (отступы / отступы) утилит ...

                    <li className="nav-item active">
                          <Link className='nav-link one' to='/'>
                              <i className="fas fa-home mr-2"></i>
                              Home
                              <i className="fas fa-caret-down ml-2"></i>
                          </Link>
                    </li> 

https://codeply.com/p/DR3Zj2iz87