CODEWITHSUNDEEP
htmlcss
Mir
Mir

Reputation: 11

Right align horizontal menu css/html

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

<!DOCTYPE html>
<html>
<head>
        <title> 
            Couch Cinematics
        </title>
            <style>
            #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;
                }

            </style>

Upvotes: 0

Views: 60

Answers (1)

DohaHelmy
DohaHelmy

Reputation: 809

Maybe you need to align text to right like the left menu is aligned to left. Try it with and without the right float to find which one will work.

.rightMenu{
    text-align: right;
    display: inline-block;
    background: lightpink;
}

Upvotes: 2

Related Questions