Fixes for Bootstrap 4 Cropping - html

Question

I have a sliding overlay animation that works just fine without Bootstrap being imported, but when I import Bootstrap 4 (using it for a webpage I'm developing) the slides for the animation are cropped from the right and don't quite meet.
https://codepen.io/AdenMuhammad097/pen/YQPwJo
#body1 {
margin-top: 50px;
font-family: 'Open Sans', arial, sans-serif;
background: white;
}
* {
margin: 0;
padding: 0;
}
#categories {
overflow: hidden;
width: 90%;
margin: 0 auto;
}
.clr:after {
content: "";
display: block;
clear: both;
}
#categories li {
position: relative;
list-style-type: none;
width: 27.85714285714286%;
/* = (100-2.5) / 3.5 */
padding-bottom: 32.16760145166612%;
/* = width /0.866 */
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2) {
margin: 0 1%;
}
#categories li:nth-child(6n+4) {
margin-left: 0.5%;
}
#categories li:nth-child(6n+4),
#categories li:nth-child(6n+5),
#categories li:nth-child(6n+6) {
margin-top: -6.9285714285%;
margin-bottom: -6.9285714285%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(6n+4):last-child,
#categories li:nth-child(6n+5):last-child,
#categories li:nth-child(6n+6):last-child {
margin-bottom: 0%;
}
#categories li * {
position: absolute;
visibility: visible;
}
#categories li>div {
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility: hidden;
}
/* HEX CONTENT */
#categories li img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
#categories div h1,
#categories div p {
width: 90%;
padding: 0 5%;
background-color: #008080;
background-color: rgba(0, 128, 128, 0.8);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#categories li h1 {
bottom: 110%;
font-style: italic;
font-weight: normal;
font-size: 1.5em;
padding-top: 100%;
padding-bottom: 100%;
}
#categories li h1:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 45%;
width: 10%;
text-align: center;
z-index: 1;
border-bottom: 2px solid #fff;
}
#categories li p {
padding-top: 50%;
top: 110%;
padding-bottom: 50%;
}
/* HOVER EFFECT */
#categories li div:hover h1 {
bottom: 50%;
padding-bottom: 10%;
}
#categories li div:hover p {
top: 50%;
padding-top: 10%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id='body1'>
<ul id="categories" class="clr">
<li class="pusher"></li>
<li>
<!--This is the Bright Hex-->
<div>
<img src="https://c1.staticflickr.com/4/3156/2871027448_789b8d0552_b.jpg" alt="" />
<h1>Bright C.S. Building</h1>
<p>Working problem sets, building out a new project, or (most likely) screwing around online...</p>
</div>
</li>
</ul>
</div>

Answer 1

I think you are expecting as in my codepen.
URL : https://codepen.io/Ashish9342/full/YvqLzw
I have changed the width to 100% and h1 margin to 0.
Default values: h1-h6 has default margin. You need to remove this.
//Added margin and width 100%
#categories div h1, #categories div p{
width:100%;
margin: 0;
padding:0 5%;
background-color:#008080; background-color: rgba(0, 128, 128, 0.8);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}

Answer 2

only add this style
*, ::after, ::before {
box-sizing: unset !important;
}
#body1 {
margin-top: 50px;
font-family: 'Open Sans', arial, sans-serif;
background: white;
}
* {
margin: 0;
padding: 0;
}
#categories {
overflow: hidden;
width: 90%;
margin: 0 auto;
}
*, ::after, ::before {
box-sizing: unset !important;
}
.clr:after {
content: "";
display: block;
clear: both;
}
#categories li {
position: relative;
list-style-type: none;
width: 27.85714285714286%;
/* = (100-2.5) / 3.5 */
padding-bottom: 32.16760145166612%;
/* = width /0.866 */
float: left;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(3n+2) {
margin: 0 1%;
}
#categories li:nth-child(6n+4) {
margin-left: 0.5%;
}
#categories li:nth-child(6n+4),
#categories li:nth-child(6n+5),
#categories li:nth-child(6n+6) {
margin-top: -6.9285714285%;
margin-bottom: -6.9285714285%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(6n+4):last-child,
#categories li:nth-child(6n+5):last-child,
#categories li:nth-child(6n+6):last-child {
margin-bottom: 0%;
}
#categories li * {
position: absolute;
visibility: visible;
}
#categories li>div {
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility: hidden;
}
/* HEX CONTENT */
#categories li img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
#categories div h1,
#categories div p {
width: 90%;
padding: 0 5%;
background-color: #008080;
background-color: rgba(0, 128, 128, 0.8);
font-family: 'Raleway', sans-serif;
-webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
-ms-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
}
#categories li h1 {
bottom: 110%;
font-style: italic;
font-weight: normal;
font-size: 1.5em;
padding-top: 100%;
padding-bottom: 100%;
}
#categories li h1:after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 45%;
width: 10%;
text-align: center;
z-index: 1;
border-bottom: 2px solid #fff;
}
#categories li p {
padding-top: 50%;
top: 110%;
padding-bottom: 50%;
}
/* HOVER EFFECT */
#categories li div:hover h1 {
bottom: 50%;
padding-bottom: 10%;
}
#categories li div:hover p {
top: 50%;
padding-top: 10%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id='body1'>
<ul id="categories" class="clr">
<li class="pusher"></li>
<li>
<!--This is the Bright Hex-->
<div>
<img src="https://c1.staticflickr.com/4/3156/2871027448_789b8d0552_b.jpg" alt="" />
<h1>Bright C.S. Building</h1>
<p>Working problem sets, building out a new project, or (most likely) screwing around online...</p>
</div>
</li>
</ul>
</div>