Why doesn't the position work properly in the section

I have a section part on the website where I want four products being displayed in the middle, right and left arrows on both sides of the screen and a title in the middle above the displayed products, I think I have all of the HTML and CSS good but the position isn't working properly, can someone have a look and help me feature it out?img of the sections I am talking about

ps: the background color doesn't feel the space that the items and buttons are in, why does it happens too?

edit: this is a pic of how i wish it would look

HTML:

<section class="one">
        <div><span class="title">New products</span></div>
        <br>
        <button class="left">
            <span class="Lmain"></span>
            <span class="Lside"></span>
        </button>
        <div class="items">
            <div class="item">
                <a href="">
                    <img class="itemImg" src="../Images/Image1.png" alt="Picture of the product">
                </a>
                <div><span class="desc">Description about that specific item that is being showen to you above this text
                        right here</span></div>
            </div>
            <div class="item">
                <a href="">
                    <img class="itemImg" src="../Images/Image2.png" alt="Picture of the product">
                </a>
                <div><span class="desc">Description about that specific item that is being showen to you above this text
                        right here</span></div>
            </div>
            <div class="item">
                <a href="">
                    <img class="itemImg" src="../Images/Image3.png" alt="Picture of the product">
                </a>
                <div><span class="desc">Description about that specific item that is being showen to you above this text
                        right here</span></div>
            </div>
            <div class="item">
                <a href="">
                    <img class="itemImg" src="../Images/Image4.png" alt="Picture of the product">
                </a>
                <div><span class="desc">Description about that specific item that is being showen to you above this text
                        right here</span></div>
            </div>
        </div>
        <button class="right">
            <span class="Rmain"></span>
            <span class="Rside"></span>
        </button>
    </section>

CSS:

.title {
        text-align: center;
        position: absolute;
        margin: auto;
        border: 1px solid goldenrod;
        font-size: 40px;
    }

    .one {
        background-color: hotpink;
        position: relative;
    }

    .two {
        background-color: rgb(255, 0, 128);
    }

    /*items appearance*/
    .items {
        position: relative;
        margin: auto;
    }

    .item {
        border: 1px solid rgb(255, 170, 0);
        float: left;
        position: absolute;
        top: 0px;
        margin: 0px 8px;
        left: 12%;
        width: 350px;
        height: auto;
    }

    .itemImg {
        width: 100%;
        height: auto;
    }

    /*end of item appearance*/


    .right {
        right: 0px;
        top: 0px;
        position: absolute;
    }

    .left {
        left: 0px;
        top: 0px;
        position: absolute;
    }