My table inside a card is not responsive on small screens, causing it to go outside the card. I've tried various solutions like using flex on the parent element and setting the table width equal to the card but nothing seems to work. The card should always remain centered and fit inside the card's boundaries.
Here is an image of the error:
This is how it should look:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" />
<!-- Our css -->
<title>ABOUT</title>
<style>
/*----------------Styles for the fonts----------------*/
// remaining CSS styles...
</style>
</head>
<body>
// remaining HTML structure...
</body>
</html>