I am attempting to achieve this:
My current design is this:
I am unable to figure out a way to get the border to extend the entire width of the page. I have tried to do 100% width, but that does not work.
If I have not posted this in the right place, please tell me where to post this.
Thanks.
My Javascript is:
<div className={classes.bg}>
<h1>DECKS</h1>
<br />
<div className={classes.deck}>
{decks.map((deck, index) => {
return (
<div className={classes.separator} key={index}>
<FlashcardDeck
label={deck.label}
lastItem={decks.length === index + 1}
/>
</div>
);
})}
</div>
</div>
</div>
The problem I am ha
my css is:
t.container {
display: flex;
justify-content: center;
}
.bg {
width: 958px;
height: auto;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}
.deck {
text-align: center;
display: flex;
justify-content: flex-start;
padding: 5px;
flex-wrap: wrap;
width: 680px;
margin: 0 auto;
align-items: center;
}
.separator {
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
padding: 10px;
width: 223px;
}
.hr {
border-top: 2px solid #e1e1e1;
padding: 10px;
width: 181px;
}
.borderless {
padding: 10px;
width: 181px;
border-top: 2px solid #e1e1e1;
}
Any help will be greatly appreciated.
Thanks.