use container instead of cards for a different layout

src/components/archives/ArchiveCard.js

@@ -5,12 +5,10 @@ import { NavLink } from "react-router-dom";
 // display a single archive on a card
 export default function ArchiveCard({ archive }) {
   return (
-    <Card className="card-description">
+    <Card>
       <Card.Body>
         <Card.Title className="h2">{archive.name}</Card.Title>
-        <Container fluid>
-          <Row>
-            <Card className="card-description">
+          <Card className="card-description">
               <Card.Body>
                 <Image
                   className="mx-auto d-block"
@@ -21,19 +19,24 @@ export default function ArchiveCard({ archive }) {
                 <Card.Title className="h3 pt-3">{archive.short_description}</Card.Title>
                 <Card.Text className="text-justify">{archive.long_description}</Card.Text>
               </Card.Body>
+          </Card>
+        {/* <Container fluid>
+          <Row>
+            
             </Card>
           </Row>
           <Row className="p-2">
-            <Button
-              className="mx-auto"
+            
+          </Row>
+        </Container> */}
+        <Button
+              className="mt-3"
               as={NavLink}
               variant="outline-info"
               to={`/archives/${archive.uri}`}
             >
               Visit {archive.name} Archives
-            </Button>
-          </Row>
-        </Container>
+        </Button>
       </Card.Body>
     </Card>
   );

src/components/archives/Archives.js

 import React, { useContext } from "react";
-import { CardColumns } from "react-bootstrap";
+import { Container, Row, Col } from "react-bootstrap";
 import ArchiveCard from "./ArchiveCard";
 import { GlobalContext } from "../../contexts/GlobalContext";
 
@@ -9,11 +9,13 @@ export function Archives() {
 
   console.log("archives: ", { archives });
   return (
-    <CardColumns className="row-2">
+    <Container fluid>
+      <Row>
       {archives.map((archive) => {
         let key = "archive-" + archive.id;
-        return <ArchiveCard key={key} archive={archive} />;
+        return <Col><ArchiveCard key={key} archive={archive} /></Col>;
       })}
-    </CardColumns>
+      </Row>
+    </Container>
   );
 }