How to arrange correctly?

My code: https://codepen.io/Jeerjmin/pen/VdBVKL

<div class="container">

</div>

Problem 1:

I'm trying to crop the top left corner of banner's did, but they moving.

Problem 2:

span with class="dot" should form a colored circle, but should not.