I am having issues with applying the background and padding in my CSS. It seems that my CSS is not overriding the Bootstrap styles, and when I apply the container style, the display property is not working as expected.
Here is the code snippet:
body{
background-color: #f5d9d5;
font-family: 'Nunito' , sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<title>Document</title>
</head>
<body>
<div class="tcontainer bg-light p-2">
<img src="data:image/.." alt="">
<h4>ping pong score keeper</h4>
<div class="panel ">
<h3><span class="p1">0</span> to <span class="p2">0</span></h3>
<p>Use the buttons below to keep score</p>
<h4>playing to
<select class="form-select" aria-label="Default select example">
<option value="3">3</option>
<option value="5">5</option>
<option value="9">9</option>
<option value="12">12</option>
</select></h4>
</div>
<button>P1 +1</button>
<button>P2 +2</button>
<button>Reset</button>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>