<aside> doesn't work

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;
}

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

Yes, the rest of CSS works properly.

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

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

You welcome. Take care…