I am learning bootstrap and today I wan working with margins and padding but dealing with these I am facing a weird behaviour of bootstrap whenever I apply overall padding or padding top or padding bottom it works perfectly fine but when I apply padding left or padding right it does,nt affect the page at all and exact same is the case with margin left and margin right can anyone assist me in this regard thanks:
`
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Bootstrap/bootstrap.css">
<title>Document</title>
<style>
.container{border: 4px solid #000;}
.row{border: 3px solid indianred;}
.pink{background: lightpink;}
.orange{background: orange;}
.cyan{background: cyan;}
.blue{background: lightblue;}
.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{border: 2px solid blue;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 p-5 orange">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ex magni soluta, odio sed nihil.
</div>
<div class="col-4 pl-5 blue">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, quos. ipsum dolor sit amet, consectetur adipisicing elit. Beatae, alias.
</div>
</div>
</div>
</body>
</html>
`