Cannot Get Border Top to Extend full width

#1

I am attempting to achieve this:

Deck%20Selection%20screen%20%20%20Mindtap%20School%20%20%20Zeplin
Deck%20Selection%20screen%20%20%20Mindtap%20School%20%20%20Zeplin1905×1111 149 KB

My current design is this:

Student%20Edition2
Student%20Edition21905×1111 189 KB

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.

#2

If it is 3 items per row, then this might work:

.deck {
  text-align: center;
  display: flex;
  justify-content: flex-start;
  padding: 5px;
  flex-flow: row wrap;
  width: 760px;
  margin: 0 auto;
  align-items: center;
}

.separator {
  position: relative;
  padding: 10px;
  width: 223px;
}

.separator:nth-child(3n+1):after {
  content: "";
  position: absolute;
  left: 0;
  width: 300%;
  border-top: 1px solid black;
}
#3

Thank you for your prompt response. I will try it and post my results.

#4