Your CSS is on the right track, but consider separating some styles from the media queries for better organization.
It's recommended to start with general styles outside of media queries that apply to all screen sizes.
I made some modifications to your code in a CodePen here: https://codepen.io/vic3685/pen/xWdZzM
In the code, I adjusted certain elements at the top without altering your existing CSS drastically:
body, html {margin: 0; padding: 0; }
#container{width:100%; background:rgba(0,0,0,1); height:auto;color: white; }
/*Left menu */
#left-menu{
color:white;
}
#left-list ul{
width:100%;
list-style-type:none;
padding:0px 0px 3% 0px;
overflow:auto;
}
#left-list li{
width:97%; height:auto; color:white; }
.dropdown-content{position:absolute; background:rgba(0,0,255,1);
overflow:auto; width:102%; height:auto; float:left; transition:0.2s; transform:translate(-100%, 0%); padding:0% 0% 20px 0%;}
@media (min-width: 451px) {
#left-list {
width:200px;
position: absolute; left: 0; top: 50px;
}
#right-menu {
width: 200px;
position: absolute; right: 0; top: 50px;
height:auto; margin:0% 0% 0% 0%; padding:5% 0% 500% 0%; position:absolute; z-index:5; background:rgba(0,255,0,1); transform:translate(105%, 0%); transition:0.3s;
transition:0.15s;
}
#left-list ul {padding-left: 30px; }
#left-menu, #find, .mob-menu {float: left; height: 50px;}
.mob-menu {float: right;}
.mob-menu > a {display: block; text-align: right; }
#container:after {
content: "";
display: block;
clear: both;
}
}
My adjustments focused on:
- Moving some styles outside of media queries.
- Adding a new media query for screens wider than 450px where specific styling was missing before.
To position the menus at the sides, I utilized floats and cleared them using #container:after. Another option could be flexbox depending on browser support needed. Also, I introduced position:absolute to make menu content independent of surrounding elements.
You may need to fine-tune the design further, but this should provide a good starting point.