title: How do I make a Navbar with my logo and differentiate with my background color?
body: <p>In my project I want my navbar to fully stretch to its end and increase its height. This navbar is not full stretched. Also, I want my logo would come before react meetup and in the white it should come offwhite.</p>
  <p><a href="https://i.stack.imgur.com/klmQY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/klmQY.png" alt="Enter image description here" /></a></p>
  <p>All routing are perfectly fine and only the CSS part is needed.</p>
  <pre><code>import { Link } from &quot;react-router-dom&quot;;
  import classes from &quot;./MainNavigation.module.css&quot;;
  
  function MainNavigation() {
    return (
      &lt;header className={classes.header}&gt;
        &lt;div className={classes.logo}&gt;React Meetup&lt;/div&gt;
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link to=&quot;/&quot;&gt;All Meetups&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to=&quot;/new-meetup &quot;&gt;Add new Meetups&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to=&quot;/favorites&quot;&gt;My Favorites&lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
    );
  }
  
  export default MainNavigation;
  
  </code></pre>
  <h3>CSS</h3>
  <pre><code>header {
    display: flex;
    justify-content: space-between;
    padding: 30px 10;
    background-color: #24252a;
    padding: 30px 10;
  }
  
  .logo {
    font-size: 2rem;
    color: white;
    font-weight: bold;
  }
  
  .header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
  }
  
  .header li {
    margin-left: 3rem;
  }
  
  .header a {
    text-decoration: none;
    font-size: 1.5rem;
    color: #edf0f1;
  }
  
  .header a:hover,
  .header a:active,
  .header a.active {
    color: white;
  }
  </code></pre>
  <p>And the output I expect is like this:</p>
  <p><a href="https://i.stack.imgur.com/6qsn8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6qsn8.png" alt="Enter image description here" /></a></p>