Estoy construyendo un sitio web que se enfoca en ayudar a las personas con la admisión a la universidad. Estoy a punto de aplicar a las universidades y sentí que mis preocupaciones y problemas son los mismos que los demás. Mi problema aquí es que la barra lateral y el "contenido" principal no aparecerán uno al lado del otro y he intentado todo lo que estaba a mi alcance para solucionar el problema. Alguien podría ayudarme :) Este es el código html

 <div class= "sidenav"> <a href = "">Latest Blog Posts</a> <a href = " ">Why You are more successful than you think</a> </div> <div class= "main"> <div class= "content"> <div class="card"> <h1 style="font-size: 50px;">Submit!</h1> <p style="font-size: 20px">Thank you for considering working with DaddyChill and submitting!<br>Submitting your notes will mean that you've helped someone with their highschool test!<br> If you want to submit just click the link below!<br> </div> </div>

Este es el CSS:

 .content{ position: relative; background: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5); padding:20px; } .card{ background-color: white; } .sidenav{ height: 100%; width: 160px; position: relative; z-index: 1; top: 0; left: 0; background-color: rgba(0,0,0,0.5); overflow-x: hidden; padding-top: 20px; } .sidenav a{ padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: white; display: block; } .sidenav a:hover{ color: yellow; } .main{ margin-left: 160px; font-size: 28px; padding: 1px 10px; } @media screen and (max-height: 450px){ .sidenav {padding-top:15px;} .sidenav a { font-size: 18px} }