Struggling with creating a navigation bar for my portfolio-building project. The "Who needs a quote" element is correctly displaying on the left, but I can't figure out how to center align the links "Sports, business, politics". Tried using flexbox options without success. Any help would be greatly appreciated. Below is my code. Thanks!
//js file
import React, {Component} from 'react';
import {Navbar, Nav,NavDropdown, Form, FormControl, Button} from 'react-bootstrap';
import './Topbar.css'
import img from './logo.png'
class Topbar extends Component {
render() {
return (
<div className = "OuterDiv">
<div>
<a class="active" href="/">Who Needs A Quote!?</a>
</div>
<div class = "topnavcenter">
<a href="/SportsPage">Sports</a>
<a href="/BusinessPage">Business</a>
<a href="/PoliticsPage">Politics</a>
</div>
</div>
)
}
}
export default Topbar;
//css file
.OuterDiv {
display: flex;
flex-direction: row;
background-color: #FFFF00;
padding: 14px 16px;
font-size: 17px;
}
.topnavcenter {
float: center;
}
Thanks again!