set child element to be 100% width of parent - html

Question

I have a main element which is divided into a grid of 3 columns.
in the middle column I am displaying some listings.
each listing is a div element and has a react bootstrap card inside it.
I am trying to get the card to span 100% of the parent but that doesn't seem to be working for me.
React component
<div className="backfill">
<Row key={Listing_Id}>
<Card style={{ cursor: 'pointer' }} border="light" className="text-center fullCard" >
<Card.Body>
<Card.Title className="Title">
{Listing_Name}
<hr />
<Button className="Button" variant="outline-success" onClick={() => props.handleLikeDisLike(Listing_Id, 'Listing_Likes', Listing_Location)}> <Twemoji options={options} text=":+1:" /></Button>
<Badge className="Badge" variant="light">{Listing_Likes}</Badge>
<Button className="Button" variant="outline-danger" onClick={() => props.handleLikeDisLike(Listing_Id, 'Listing_DisLikes', Listing_Location)}><Twemoji options={options} text=":-1:" /></Button>
<Badge className="Badge" variant="light">{Listing_DisLikes}</Badge>
<hr />
<Button className="Button" variant="outline-info" ><Twemoji text=":pushpin:" /></Button>
<Badge className="Badge" variant="light">{Listing_Location}</Badge>
</Card.Title>
<Card.Text className="Listing" onClick={() => handleClick(Listing_Id)} >
<hr />
{ListingBody}
<ModalLayout
Listing_Location={Listing_Location}
Listing_Likes={Listing_Likes}
Listing_DisLikes={Listing_DisLikes}
Listing_Name={Listing_Name}
Listing_Id={Listing_Id}
handleLikeDisLike={props.handleLikeDisLike}
handleClose={closeModal}
show={showModal} />
</Card.Text>
</Card.Body>
</Card>
</Row>
<br />
</div >
CSS for div and Card elements
.backfill {
background-color: aqua;
}
.fullCard {
width:'100%';
}
I currently end up with the UI looking like this. Please can you help me sort this out. I want to get the card to be 100% of its parent div.

Answer 1

Just had to remove the single quotes from the CSS
.fullCard {
width:'100%';
}
had to become
.fullCard {
width:100%;
}