title: Right align horizontal menu css/html
body: <p>I'm trying to build a Netflix Clone website and my right menu won't align horizontally. I'm getting an error that the css property is being ignored because of "display:inline-block" but I'm not getting the same error for my left menu. Any suggestions would be more than welcome</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
          &lt;title&gt; 
              Couch Cinematics
          &lt;/title&gt;
              &lt;style&gt;
              #header{
                  background: rgb(233, 225, 178);
                  color: white;
                  overflow: auto;
                  padding-left: 25px;
                  padding-right: 25px;
              }
                  .logo{
                      text-align: left;
                      display: inline-block;
                      background: lightpink;
                      margin-right: 25px;
                      padding: 20px;
                  }
                  .leftMenu{
                      text-align: left;
                      display: inline-block;
                      background:lightpink;
                  }
                  .leftMenu ul{
                      list-style: none;
                      padding: 0;
                      margin: 0;
                  }
                  .leftMenu ul li{
                      display: inline-block;
                      padding: 20px;
  
                  }
                  .rightMenu{
                      float: right;
                      display: inline-block;
                      background: lightpink;
                  }
                  .rightMenu ul{
                      list-style: none;
                      padding: 0;
                      margin: 0;
                  }
                  .rightMenu ul li{
                      display: inline-block;
                      padding: 20px;
                  }
  
              &lt;/style&gt;
  </code></pre>