contain the logo in the navbar

previously, wide logo's would overflow the width of the Navbar.Brand. this
commit adds height to the brand element, instead of the logo image,
containing the logo height and width within the Navbar.Brand.

there isn't a bootstrap element that sets height to a specific value. the
choice was to use inline styles or create a new class. I opted to create
a new class. it's specific to the Header component so it's not in
globals.scss. the name "custom-navbar-brand" makes it easier to denote
that it's our class and not bootstrap's when inspecting from the browser.

- ref: #209

Author: alishaevn

src/compounds/Header/Header.jsx

@@ -2,15 +2,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Container, Nav, Navbar } from 'react-bootstrap'
 import Logo from '../Logo/Logo'
+import './styles.scss'
 
 const Header = ({ auth, linkColor, logo, navLinks, userSession }) => {
   const { src, alt } = logo
 
   return (
     <Navbar bg='primary' expand='lg'>
       <Container>
-        <Navbar.Brand className='w-50'>
-          <Logo src={src} alt={alt} height={45} />
+        <Navbar.Brand className='w-75 custom-navbar-brand'>
+          <Logo src={src} alt={alt} height='auto' addClass='mw-100 mh-100' />
         </Navbar.Brand>
         <Navbar.Toggle aria-controls='basic-navbar-nav' />
         <Navbar.Collapse id='basic-navbar-nav'>

src/compounds/Header/styles.scss

@@ -0,0 +1,3 @@
+.custom-navbar-brand {
+  height: 45px;
+}