A few more pointers.
You have a gap around the page from the default margin/padding on the body element so remove those.
html,body{margin:0;padding:0;}
I don’t see a meta viewport tag in place and without it you wont be able to properly add media queries for smaller devices (which now account for more views than desktops).
You have used the aside element but the aside content doesn’t seem to be tangential to the main content so it seems semantically incorrect to me. It probably should just be a section element. (No one really knows when to use aside or not so its actual worth is somewhat diluted).
Avoid using classes like left and right as they are presentational and looking at your page you have the aside called ‘left’ but it is not on the left! Use something more generic but descriptive of its use and not referring to where you think it might be placed. I would use a class of sidebar for a sidebar and that means I can place it left, right or middle without confusion.
Don’t change your navigation links to bold on hover as this is very disconcerting and bad for those that suffer from epilepsy as all the line jiggles about when you hover. You are probably better setting them all to bold and reducing the opacity on all but the current item. Then on hover you can set the opacity to 1. Also the gray colour you set as the hovered item is almost invisible and not a good choice for color contrast.
Avoid styling elements that may be used in multiple contexts directly.
e.g. you have styled nav
and header
globally but n a real site they may be used in multiple places and indeed in third party code that you may add later.
header {
background-color: #0e6655;
}
Use a class instead tyo avoid conflicts and to make sure you only target the elements you meant to target.
.main-header {
background-color: #0e6655;
}
<header class="main-header">
Don’t put space bewteen your classnames as older browsers will choke on it.
e.g. You have this:
<aside class = "left">
It should be:
<aside class="left">
Avoid descendant selectors where possible. They are ok in contained contexts but you have this rule.
header nav {
float: right;
margin-top: 10px;
}
Again that will target all header elements wherever they are and all navs within headers (which there are usually a few on a web page). If you used the .header-main class I mentioned above you could target just the nav in your header and not every other header that may appear on the page. For robustness I would advocate just adding a class to the nav instead and call it something like .main-nav{}
Then you can lose the descendant selector and just use main-nav instead.
.main-nav {
float: right;
margin-top: 10px;
}
That is faster to parse and more robust to maintain. I’m not saying never use descendant selectors but just be aware of where things may go wrong later on.
Lastly beware of vertical margins using percentage because they refer to the width of the containing block and nothing to do with the height available. In most cases for vertical margins and padding you will use a fixed measurement (em,rem,px etc).
That’s enough pointers for now 