fix: added max-width style property with 560px value (#507)

* added max-width style property with 560px value

* fixed align on search bar

* implemented Tamika's feedback on nesting classes and rename class for nav-search-bar

amundsen_application/static/js/components/NavBar/index.tsx

@@ -62,7 +62,7 @@ export class NavBar extends React.Component<NavBarProps> {
   renderSearchBar = () => {
     if (this.props.location.pathname !== '/') {
       return (
-        <div className="search-bar">
+        <div className="nav-search-bar">
           <SearchBar size="small" />
         </div>
       );

amundsen_application/static/js/components/NavBar/styles.scss

@@ -77,11 +77,17 @@ $avatar-container-size: 40px;
     margin-right: 12px;
   }
 
-  .search-bar {
+  .nav-search-bar {
     flex-grow: 1;
     margin: auto $spacer-2 auto auto;
+    .search-bar {
+      max-width: 560px;
+      margin: auto 0px auto auto;
+    }
   }
 
+
+
   .logo-icon {
     margin-right: $spacer-2;
     max-height: 32px;

amundsen_application/static/js/components/common/SearchBar/index.tsx

@@ -190,7 +190,7 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
     }`;
 
     return (
-      <div id="search-bar" ref={this.refToSelf}>
+      <div id="search-bar" className="search-bar" ref={this.refToSelf}>
         <form
           id="search-bar-form"
           className="search-bar-form"