I am trying to align .container to the center of the page, right now it is only going on the left side.
I have tried "float:left" as well as "left:" Neither of these did me any good.
What I am looking for is the correct alignment tag to get .container aligned in the center.
Thanks,
Mint
.container {
background-color: lightgrey;
padding: 1rem;
border-radius: .5rem;
width: 700px;
max-width: 90%;
}
.quote-display {
margin-bottom: 1rem;
margin-left: calc(1rem + 2px);
margin-right: calc(1rem + 2px);
}
.quote-input {
background-color: transparent;
border: 2px solid red;
width: 100%;
height: 8rem;
margin: auto;
resize: none;
padding: .5rem 1rem;
font-size: 1rem;
border-radius: .5rem;
}
.quote-input:focus {
border-color: black;
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<div class="main">
<div id="title">
<h1 style="margin: 0;">Typerore</h1>
</div>
<div class="timer" id="timer"></div>
<div class="container">
<div class="quote-display" id="quoteDisplay"></div>
<textarea id="quoteInput" class="quote-input" autofocus></textarea>
</div>
</div>>Solution :
If I were you I would look into Flexbox. A solution to your problem would be to add a wrapper around your container and do this styling on it:
.wrapper { display: flex;
justify-content:center;
}
Maybe something like this: https://jsfiddle.net/s35x607o/1/
For more really nice reading, check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/