Why is the content behind the arrows (bootstrap)?

Question

css

here is the code:
https://codepen.io/shikigami/pen/OJVNYGz

Answer 1

So no positioning properties are set on the element, so it's pushed to the left.
As an example
.carousel-item {
text-align: center;
}
And so for the navigation elements in the properties there is a given block length
.carousel-control-next, .carousel-control-prev {
...
width: 15%;
...
}
this gives the offset
To understand the principle, example:
.carousel-control-next, .carousel-control-prev {
width: 10px;
}
.carousel-item {
margin-left: 50px;
}