在 firebase 托管上托管我的网站时无法将卡片居中

Question

当我在本地主机上使用我的网站时，我的卡位于中心位置，但是当我将其部署在 Firebase 上时，它位于左侧位置而不是中心，卡的代码如下：

//Code of card in ReactJS
<div style={{margin:'auto'}} align='center' className="container5">
      {data.map((card, index) => (
        <div style={{margin:'auto'}} align='center'  className={`card`} data-state={activeSections[index]} key={card.id}>
          <div className="card-header">
            <div
              style={{
                backgroundImage: `url('${card.imageUrl}')`,
              }}
              className="card-cover"
            ></div>
            <h1 className="card-fullname">{card.name}</h1>
            <h2 className="card-jobtitle">{card.jobTitle}</h2>
          </div>
          <div className="card-main">
            <div
              className={`card-section ${activeSections[index] === '#about' ? 'is-active' : ''}`}
              id="about"
            >
              <div className="card-content">
                <div className="card-subtitle">Description</div>
                <div className="card-desc-container">
                  <p className="card-desc">
                    {card.about}
                  </p>
                </div>
              </div>
            </div>
            <div
              className={`card-section ${activeSections[index] === '#experience' ? 'is-active' : ''}`}
              id="experience"
            >
              <div className="card-content">
                <div className="card-subtitle">Tech Stack</div>
                <div className="card-tech-stack">
                  {card.techStackData.map((tech, techIndex) => (
                    <div
                      key={techIndex}
                      className={`card-tech-item ${activeSections[index] === '#experience' ? 'is-active' : ''}`}
                      onClick={() => handleButtonClick(index, '#experience')}
                    >
                      {tech}
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div
              className={`card-section ${activeSections[index] === '#contact' ? 'is-active' : ''}`}
              id="contact"
            >
              <div className="card-content">
                <div className="card-subtitle">CONTACT</div>
                <div className="card-contact-wrapper">
                  <div className="card-contact">
                    {card.liveLink && (
                      <a
                        href={card.liveLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="live-button"
                      >
                        Live
                      </a>
                    )}
                    {card.liveLink && card.githubLink && <span className="button-separator"></span>}
                    {card.githubLink && (
                      <a
                        href={card.githubLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="github-button"
                      >
                        Github
                      </a>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <div className="card-buttons">
              <button
                onClick={() => handleButtonClick(index, '#about')}
                className={activeSections[index] === '#about' ? 'is-active' : ''}
                data-section="#about"
              >
                ABOUT
              </button>
              <button
                onClick={() => handleButtonClick(index, '#experience')}
                className={activeSections[index] === '#experience' ? 'is-active' : ''}
                data-section="#experience"
              >
                Tech Stack
              </button>
              <button
                onClick={() => handleButtonClick(index, '#contact')}
                className={activeSections[index] === '#contact' ? 'is-active' : ''}
                data-section="#contact"
              >
                Link
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>

//CSS 
.card {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #ffffff 0%, #f0f4fd 100%);
  overflow: hidden; /* Add overflow hidden for rounded corners */
  transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s;
}

我已经尝试过 margin : 'auto' ,align='center' 但在已部署的网站上没有任何作用，它仍然位于 div 的左侧位置。

Answer 1

您能否提供我们可以重现问题并调试的链接？