Front End Development Libraries Projects - Build a Random Quote Machine - center quote-box wrapper

HTML-CSS
1

Tell us what’s happening:
the #quote-box is horizontally centered but I am failing that specific test. I believe I have completed the project and it looks how it should.

Your code so far
HTML

<div id="quotebox" class="container-fluid " ><br/><br/><br/><br/>
  <div id="quote-box" class="row justify-content-center">
    <div   class =" col-md-4 col-xs-8 border shadow p-3 mb-5 bg-body-tertiary rounded animated fadeIn">
      <br/>
        
        <i class="bi bi-quote text-center" id="quote-mark" aria-hidden="true"></i>
      
      <div  class="row justify-content-center" >
        <p id="text" class="text-center col col-10 " >"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</p>
      </div>
      <div  class="row justify-content-center"> 
        <p id="author" class="col col-10 text-center ">Lorem Ipsum</p><br/>
      </div>
      <br/>
      <div id="buttons" class="row justify-content-around">
          <div class="col col-md-4 col-xs-6 text-start">
            <a id="tweet-quote" class="btn btn-secondary twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world">
            <i class="bi bi-twitter"></i>
            </a> 
          </div>
        <div class="col col-md-4 col-xs-6 text-end">
          <button type="button" class="btn " id="new-quote">New Quote</button>
        </div>  
       
      </div>
      
    </div> 
    
  </div>
  <p id="welz">by Welile</p>
</div>

CSS

:root{
  --theme: #20c997;
}

.color1{
  border: #57d9f1;
  font-size: 1em;
}

#welz{
  font-size: 0.6em;
  text-align: center;
  
}

#text{
  font-size:1.5em;
  
}

#buttons{
  font-size:0.7em;
}
#quote-mark{
  font-size: 2.5em;
  display:block;
  margin: auto;
  color: var(--theme);
  
}
#quotebox{
  backround-color: pink;
  display: block;
  margin: 0 auto;
 
}

#new-quote{
  background-color: var(--theme);
  color: #fff
}
body{
  background-color:var(--bs-dark);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

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

Link to the challenge:

2

Please post all your code.

Better yet, post a live version. You can use Codepen/StackBlitz/CodeSandbox/Replit. Include the test script as well.

Technically, you are using Bootstrap for the centering. The element has no width so your own auto margin is not doing anything. The fluid container is not a fixed-width container, if you switch to the container class instead it should pass the tests.