Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
I am getting an error saying: The #quote-box wrapper element should be horizontally centered. Please run tests with browser’s zoom level at 100% and page maximized.

Your code so far
body {
padding: 2rem 0 0 2rem;
}

.bg {
background-color: white;
}

#quote-box {
margin: auto;
padding: auto;
position: center;

}

#text {
font-size: 4rem;
}

#author {
font-size: 3rem;
text-align: right;
}

#buttons {
position: sticky;
padding: 4vw;
margin: 4vw;
}

div {
margin: auto;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

3

Here is my codeine link:

4

Are you trying to center the quote-box element or the content inside it?

A block-level element needs a width otherwise it is just full width.

Example

<div id="quote-box">
  <div id="quote">Quote</div>
</div>

#quote-box {
  max-width: 960px;
  margin: auto;
  background-color: lightgreen;
  padding: 1rem;
}

#quote {
  background-color: orange;
  padding: 0.5rem;
}

Edit: If you want to vertically center the box you can use the container.

.container {
  height: 100vh;
  display: grid;
  place-items: center;
}

These are not valid values.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.