como dice el título, tengo dos divs en un contenedor y estoy tratando de centrar un div y tener el otro en el lado derecho del contenedor. He intentado usar un montón de cosas diferentes, pero me encuentro con un problema u otro. Mi principal preocupación es tener un diseño web receptivo, ya que cuando mi página se vuelve más pequeña, el sitio debería poder mantener su estructura y no encajar.
aquí está mi HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="stylepoints.css"> <script src="magic.js" defer></script> <title>Words Per Minute Test</title> </head> <body> <div class="topcontainer"> <h1 class="titlebar" id="title-bar">Words Per Minute Test </h1> <div class="highscore" id="high-score">High Score: 20 </div> </div> <div class="timer" id="timer">60</div> <div class="container"> <div class="word" id="word">top</div> </div> <textarea class="input" id="input" autofocus></textarea> </body> </html>y aquí está mi CSS
*{ box-sizing: border-box; border-style: solid; border-color: white; } body { /* display:flex; justify-content: center; align-items: center; min-height: 100vh; */ margin: 0; background-color: #121250; } body, .input { font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS','sans-serif'; } .container { position: relative; margin: 10em auto; background-color: #123150 ; padding:1em; border-radius: .5em; width: 20em; } .word { position: relative; text-align: center; font-size: 1.8em; color: white; } .timer{ font-size: 2.7em; position: relative; display: flex; justify-content: center; margin-top: 3.5em; color: aliceblue; } h1{ position: relative; display: flex; justify-content: center; color: white; margin: auto; } .topcontainer{ display: flex; position: absolute; background-color: #123150; width: 100%; height: 7em; } .highscore{ position: relative; font-size: 2em; color: #19a642; justify-content: center; margin: auto; }