Why does the divs starts from between in case of overflow hidden?

Question

Styles

    body{
      margin:unset;
    }
    .carousel{
      height: 200px;
      width: 100%;
      padding: 10px;
      box-sizing