working on accordions and flexing correctly

src/components/ShootSection.css

@@ -0,0 +1,29 @@
+.accordion{
+    width: 90%;
+    border: 3px black;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-wrap: wrap;
+
+}
+.accordion-header{
+    width: 98%;
+    border: 3px black;
+}
+
+.accordion-item{
+    width: 50%;
+    min-width: 300px;
+}
+.accordion-button{
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+h4{
+    width: 100%;
+    text-align: center;
+    margin: auto;
+}

src/components/ShootSection.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import {
+  Accordion,
+  AccordionItem,
   Col,
   Container,
   Row,
 } from 'react-bootstrap';
 
+import "src/components/ShootSection.css"
 import ShootOptions from 'src/ShootOptions';
 import AttackerControls from "src/components/AttackerControls";
 import DefenderControls from "src/components/DefenderControls";
@@ -51,35 +54,39 @@ const ShootSection: React.FC = () => {
   ].map(note => <li key={note.name}><b>{note.name}</b>: {note.description}</li>);
 
   return (
-    <Container style={{width: 'fit-content'}}>
-      <Row>
+    <div>
+      <h4>
         Kill Team 2021 Edition, Shooting
         <a href='https://www.warhammer-community.com/wp-content/uploads/2022/08/ekD0GG2pTHlYba0G.pdf'>[Lite Rules]</a>
-      </Row>
-      <Row>
-        <Col className='border p-0'>
-          Situation1
-          <ShootSituation/>
-        </Col>
-        <Col className='border p-0'>
-          Situation2
-          <ShootSituation/>
-        </Col>
-      </Row>
+      </h4>
+      <Accordion defaultActiveKey="0" alwaysOpen>
+        <Accordion.Item  eventKey='0'>
+          <Accordion.Header className='ShootSection'>Situation 1</Accordion.Header>
+          <Accordion.Body className='ShootSection'>
+            <ShootSituation/>
+          </Accordion.Body>
+        </Accordion.Item>
+        <Accordion.Item eventKey='1'>
+          <Accordion.Header>Situation 2</Accordion.Header>
+          <Accordion.Body>
+            <ShootSituation/>
+          </Accordion.Body>
+        </Accordion.Item>
+      </Accordion>
       <Row>
         <Col className={Util.centerHoriz + ' border'} style={{fontSize: '11px'}}>
           <Credits/>
         </Col>
       </Row>
-      <Row style={{width: '800px'}}>
+      <Row style={{width: '50%'}}>
         <Col className='border' style={{fontSize: '11px'}}>
           Notes:
           <ul>
             {noteListItems}
           </ul>
         </Col>
       </Row>
-    </Container>
+      </div>
   );
 };