Use Bootstrap Component

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Logo from './imgs/logo.png';
import Home from '../pages/Home';
import About from '../pages/About';
import Search from '../pages/Search';
let Header = () => {
    return(
        <div>
        {/* Navigation menu start */}

 <div className="container-fluid">
              <div className="row">

                {/* logo section */}
                <div className="col-lg-6 col-xl-6">
                    <img src={Logo} width={230} height={100}  />
                </div>

                {/* nav start */}
                <div className="col-lg-6 col-xl-6">
                <div class="navbar1">
                   <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
                   <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
                   <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
                   <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
                </div>

                </div>

              </div>

           </div>

        {/* Navigation menu end */}

        </div>

    )

}

export default Header;