Screen Capture of the issue in question
I am working on my first Project, it is a Book-list library.
I can’t seem to get the Card components to be centered on the site. It is shifted to the left.
I have all of my Card information in the App.js file, Card.js, and Card.css
I have tried multiple methods, videos, and even tried to see if ChatGPT could give some insight but nothing seems to get them centered.
(I have added a screen capture of the issue above)
Thank you very much
**App.js code below:**
function App() {
return (
<Router>
<div style={{ display: 'flex' }}>
<Navbar />
<div style={{ marginLeft: '200px', padding: '20px' }}>
<Routes>
<Route path="/catalog" element={<Catalog />} />
<Route path="/favorite" element={<Favorites />} />
<Route path="/" element={
<div className="App">
{/* First Row: */}
<div className="col">
<Card
imgSrc={img12}
imgAlt="Harry Potter and the Prisoner of Azkaban"
title="Harry Potter and the Prisoner of Azkaban"
description="Author: J.K. Rowling; Cover design by Olly Moss, 2017"
buttonText="Learn More"
link="https://bookshop.org/p/books/import-9781338815283/19690866?ean=9781338815283"
/>
<Card
imgSrc={img6}
imgAlt="Jaws"
title="Jaws"
description="Author: Peter Benchley; Cover design by Paul Bacon, 1974"
buttonText="Learn More"
link="https://bookshop.org/p/books/jaws-peter-benchley/15279162?ean=9780345544148"
/>
<Card
imgSrc={img5}
imgAlt="The Great Gatsby"
title="The Great Gatsby"
description="Author: F. Scott Fitzgerald; Cover art by Francis Cugat, 1925"
buttonText="Learn More"
link="https://bookshop.org/p/books/the-great-gatsby-f-scott-fitzgerald/18533627?ean=9780743273565"
/>
</div>
{/* Second Row: */}
<div className="col">
<Card
imgSrc={img7}
imgAlt="Pride and Prejudice"
title="Pride and Prejudice"
description="Author: Jane Austen; Cover design by Hugh Thomson, 1894"
buttonText="Learn More"
link="https://bookshop.org/p/books/pride-and-prejudice-jane-austen/15657135?ean=9780141439518"
/>
<Card
imgSrc={img3}
imgAlt="I Know Why the Caged Bird Sings"
title="I Know Why the Caged Bird Sings"
description="Author: Maya Angelou, Cover design by Janet Halverson, 1969"
buttonText="Learn More"
link="https://bookshop.org/p/books/i-know-why-the-caged-bird-sings-maya-angelou/8496752?ean=9780375507892"
/>
<Card
imgSrc={img11}
imgAlt="The Handmaids Tale"
title="The Handmaids Tale"
description="Author: Margaret Atwood, Cover design by Fred Marcellino, 1986"
buttonText="Learn More"
link="https://bookshop.org/p/books/brave-new-world-aldous-huxley/18711990?ean=9780060850524"
/>
</div>
{/* Third Row: */}
<div className="col">
<Card
imgSrc={img1}
imgAlt="Harry Potter and the Chamber of Secrets"
title="Harry Potter and the Chamber of Secrets"
description="Author: J.K. Rowling; Cover design by Olly Moss, 2016"
buttonText="Learn More"
link="https://bookshop.org/p/books/harry-potter-and-the-chamber-of-secrets-minalima-edition-illustrated-edition-volume-2-j-k-rowling/15063913?ean=9780439064866"
/>
<Card
imgSrc={img4}
imgAlt="The Catcher in the Rye"
title="The Catcher in the Rye"
description="Author: J.D. Salinge; Cover design by E. Michael Mitchell, 1951"
buttonText="Learn More"
link="https://bookshop.org/p/books/the-catcher-in-the-rye-j-d-salinger/114571?ean=9780316769488"
/>
<Card
imgSrc={img2}
imgAlt="Brave New World"
title="Brave New World"
description="Author: Aldous Huxley, Cover design by Leslie Holland, 1932"
buttonText="Learn More"
link="https://bookshop.org/p/books/brave-new-world-aldous-huxley/18711990?ean=9780060850524"
/>
</div>
{/* Fourth Row: */}
<div className="col">
<Card
imgSrc={img8}
imgAlt="Slaughterhouse-Five"
title="Slaughterhouse-Five"
description="Author: Kurt Vonnegut, Cover design by Paul Bacon, 1969"
buttonText="Learn More"
link="https://bookshop.org/p/books/slaughterhouse-five-or-the-children-s-crusade-a-duty-dance-with-death-kurt-vonnegut/15551258?ean=9780440180296"
/>
<Card
imgSrc={img18}
imgAlt="Lord of the Rings"
title="Lord of the Rings: The Return of the King"
description="Author: J. R. R. Tolkien; Cover design by Johan Egerkrans, 2020"
buttonText="Learn More"
link="https://bookshop.org/p/books/song-of-solomon-toni-morrison/285447?ean=9781400033423"
/>
<Card
imgSrc={img17}
imgAlt="The Color Purple"
title="The Color Purple"
description="Author: Alice Walker; Cover design by Judith Kazdym Leeds, 1982"
buttonText="Learn More"
link="https://bookshop.org/p/books/the-color-purple-alice-walker/285324?ean=9780143135692"
/>
</div>
{/* Fifth Row: */}
<div className="col">
<Card
imgAlt="Favorites List"
title="Favorites List:"
buttonText="View Favorites"
link="http://localhost:3000/components/Favorites"
/>
<Card
imgAlt="Book Catalogs"
title="Book Catalogs:"
buttonText="View Catalogs"
link="http://localhost:3000/components/Catalog"
/>
<Card
imgSrc={img14}
title="Audible.com"
imgAlt="Audible.com"
description="Online audiobook and podcast service"
buttonText="View Here"
link="https://www.audible.com/"
/>
<Card
imgSrc={img13}
title="NY Times Best Sellers List"
imgAlt="NY Times Best Sellers List"
description="Authoritatively ranked lists of Best Seller books, from 'The New York Times'"
buttonText="View Here"
link="https://www.nytimes.com/books/best-sellers/"
/>
<Card
imgSrc={img10}
imgAlt="Jurassic Park"
title="Jurassic Park"
description="Author: Michael Crichton; Cover design by Chip Kidd, 1990"
buttonText="Learn More"
link="https://bookshop.org/p/books/jurassic-park-michael-crichton/14708249?ean=9780345538987"
/>
</div>
</div>
}
/>
</Routes>
</div>
</div>
</Router>
);
}
export default App;
Card.js code below:
import React from "react";
import { Link } from 'react-router-dom';
import "./Card.css";
export const Card = ({
imgSrc,
imgAlt,
title,
description,
buttonText,
link,
}) => {
return (
<div className="card-container">
{imgSrc && imgAlt && (
<img src={imgSrc} alt={imgAlt} className="card-img" />
)}
{title && <h1 className="card-title">{title}</h1>}
{description && <p className="card-description">{description}</p>}
{buttonText && link && (
<a href={link} className="card-button-link">
<button className="card-button">{buttonText}</button>
<Link to={link} style={{ textDecoration: 'none', color: 'inherit' }}></Link>
</a>
)}
</div>
);
};
export default Card;