Using css to allign logo in my header


#1

Hello I’m building an app/site with react.js and I’m having trouble with the css and alignment. I have my menu items for Navigation positioned right and my login and signup positioned to the right. I’m trying to position my Logo dead square in the middle and also its so damn small you cant read it. I tried a couple things with my markup but its a miss fire every time. Can somebody direct me in the right direction???

heres the markup and screen shot: (in the screen shot youll see where the logo geekmonster is positioned left next to the menu and its to small to read

const NavBar = () => (
  <Menu>
    <Menu.Menu>
        <Menu.Item>
            Home <img src={logo} alt="logo"/>
        </Menu.Item>
        <Menu.Item>
            About <img src={logo} alt="logo"/>
        </Menu.Item>
        <Menu.Item>
            Projects  <img src={logo} alt="logo"/>
        </Menu.Item>
        <Menu.Item>
            Contact  <img src={logo} alt="logo"/>
        </Menu.Item>
    </Menu.Menu>

//this is where im having my problem....
    <Menu >
        <Menu.Item widths="3">
            <img src={logo2} alt="logo2"/>
        </Menu.Item >
    </Menu>
    <Menu.Menu position="right">
         <Menu.Item>
             Sign Up
         </Menu.Item>
         <Menu.Item>
             Login
         </Menu.Item>
    </Menu.Menu>
 </Menu>
);