-1

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 enter image description here

.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>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
Jackson Pope
  • 23
  • 6
  • 1
    As always: Dont use `float` outside of the intend purpose. `float` should not be used for aligning purpose (with exception of email-templates). `float` is a property to let an element float within a text-block. If you want to align items next to each other you should use `Flexbox`, `CSS-Grid` or `inline-block` – tacoshy Mar 07 '22 at 18:20
  • I'm new to coding, sorry if this sounds dumb, but when I tried adding "Flexbox" and "inline-block" to my code, nothing happened. How would I use these? Or is there something that I need to import. Thanks. – Jackson Pope Mar 07 '22 at 18:22

1 Answers1

2

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/

Doddlin
  • 124
  • 7