<aside> doesn't work

1

I am very new so sorry for a very basic question. For some reason aside
doesn’t work in my code, tried putting the main text in section and using article, neither one helped. Calling the containers by #name in CSS didn’t work either, not sure where I messed up.

(Also I just noticed that navigation bar ignores styling in the body, changing it to div didn’t do anything.)
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cafe Website</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav class="navigation" id="navigation">
        <ul id="links">
            <li><a class="active" href=index.html>Home</a></li>
            <li><a href=about.html>About</a></li>
            <li><a href=menu.html>Menu</a></li>
        </ul>
    </nav>

    <div class="welcome">
        <h2>Welcome</h2>
        <h4>Maecenas ac lorem sed velit bibendum dignissim sit amet non nulla.</h4>
    </div>

    <div class="signature" id="box-1" name="box-1">
        <p>Lorem 1</p>
    </div>

    <hr>

    <div class="main" id="box-2" name="box-2">
        <p>Quisque non dignissim massa. Sed tempus magna vel euismod ornare. Cras congue mollis facilisis. Morbi nulla orci, euismod eu metus a, vulputate commodo est.</p>
        <p>Mauris libero eros, porta sit amet lobortis id, dignissim vitae tortor.</p>
    </div>
            
    <aside class="side" id="box-3" name="box-3">
        <p>Cras tortor elit, sodales in diam sed, tincidunt rhoncus ex. Integer malesuada bibendum ipsum blandit semper.</p>
    </aside>

    <div class="clear"></div>

    <footer class="footer" if="footer" name="footer">
        <a href="#contact">Contact us</a>
        <a href="#careers">Careers</a>
        <a href="#etc">Et cetera</a>
    </footer> 

</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Lato');

a{
    text-decoration:none;
    color:black;
}

a:hover{
    color:#6b623c;
}

a:visited{
    color:#ac4e36;
}

.head, body{
    height: 100%;
    background-color:#bdb9a5;
    font-size:1.1em;
    color:#3d352b;
    font-family: 'Lato', sans-serif;
    padding-left:18px;
    box-sizing:border-box;
    -webkit-text-size-adjust: none;
}

.welcome{
    padding-left:10px;
    text-align:center;
}

.signature{
    position:relative;
    padding:10px 40px  10px 40px;
    overflow-wrap:break-word;

}

.main{

    overflow-wrap:break-word;
    outline: 1px solid;
    padding: 10px;
}

.side{
    display:flex;
    outline: 1px solid;
    padding: 10px;
    float: right;
}

.clear{
    clear: both;
}

#links{
    font-size:1.4em;
    list-style:none;
}

.footer{
    text-align:center;
    margin: 20px 15px 5px 15px;
}
2

@rixavie Hi, have you checked the path to your css file while linking it to your html?

3

Yes, the rest of CSS works properly.

4

First the name selector is not use for styling you can make use of the ID or Class selector .
Two, in the css i noticed the use of .head,body of which i think you wanted to use html,body
Three, in your file linking some of the links are not quoted
You also need to set a width for both the main and the aside

5

Thanks, I misspoke and meant ID selector not name.
Thank you! Width fixed it

6

You welcome. Take care…