title: why is my css not working
body: <p>I have created a react component and imported my external css file. some of the css is working correctly but the majority of it isnt being displayed. not sure what im doing incorrectly.if anyone could point me in the right direction that would be much appriciated.</p>
  
  <p>this is my CSS</p>
  
  <pre><code>.Layout{
      z-index: 999;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      position: fixed;
      background-color: rgba(255,255,255,0.3);
      box-shadow: 0px 1px 100px 1px rgba(82, 82, 82, 1);
      height: 3em;
      width: 100vw;
  };
  .Logo{
      flex: 1;
      color: white;
      font-size: 20;
      padding-left: 15px;
  };
  .Search{
      flex: 5;
  };
  .Input{
      text-align: center;
      font-size: 20;
      width: 400;
      border-radius: 8
  }
  </code></pre>
  
  <p>this is my react component</p>
  
  <pre><code> import React, { Component }     from 'react';
      import { connect }              from 'react-redux';
      import { Locate, autoLocate }   from '../Actions'
      import '../CSS/Header.css'
  
      class Header extends Component{
          constructor(props){
              super(props);
              this.state={ };
              this.onSearchChange = this.onSearchChange.bind(this);
          }
  
      componentWillMount(){
          this.props.autoWeather('autoip');
      }
  
      onSearchChange(event){
          this.props.fetchTodayWeather(event.target.value);
      }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;div className="Layout"&gt;
                      &lt;div className="Logo"&gt;Weather Now&lt;/div&gt;
                      &lt;div className="Search"&gt;&lt;input className="Input" placeholder='search the weather in your area' value={ this.props.query } onChange={ this.onSearchChange } /&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
      }
  
      const mapStateToProps = state =&gt; {
      const query = state.locate.query;
  
          return{ query };
      }
  
      const mapDispatchToProps = (dispatch) =&gt; {
          return{
              autoWeather:(location) =&gt; dispatch(autoLocate(location)),
              fetchTodayWeather: (location) =&gt; dispatch(Locate(location))
  
      };
      };
  
      export default connect(mapStateToProps, mapDispatchToProps)(Header)
  </code></pre>