Display: inline-block is not aligning text

Asked

Viewed 32 times

-4

I’m trying to line up three words using the display: inline-block. But they’re not getting aligned, I’ve rewritten the code and nothing, anyone has any idea why this is happening. I want to align the part "Home Menu Contact"

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Elvis Alencar Delivery</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<!-- Topo do site, menu -->

<div class='one'></div>
<header class='header'>
    <div class='container'>
        <a href='index.html' class='grid-4'>
            <img src="#" alt="logo do Elvis Alencar Delivery"/>
        </a>
    
    <nav class='grid-12 topo'>
        <ul>
            
            <li><a href='index.html'>Início</a></li>
            <li><a href='#'>Cardápio</a></li>
            <li><a href='#'>Contato</a></li>

        </ul>
    
    
    </nav>

    </div>

</header>

<!-- Fim do menu -->
</body>
</html>

The style of css.

.one {
 width: 100%;
 height: 4px;
 background: #f2e41b;

}

.header {
    width: 100%;
    background-color:#d90404;
    padding: 25px;
    
}

.topo {
    text-align: right;
}

.topo ul il {
    display: inline-block;
}

html css

1 answer

-2


Hi, did you see that you misspelled the "li"? You wrote so: ". top ul il". Anything try to put only Inline Display. :) If this does not work, try to put the Inline Display only in the ". top ul". The Flex Display would solve that too. :)

  • 1

    I saw now kkkkkkkkkk, what a mistake beast. Thank you very much =)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.