html – horizontal bar and wed page distortion problem after added Bootstrap 5

/*======Google Font======*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

ul {
    list-style: none
}

button,
input,
select {
    margin: 0
}

html {
    box-sizing: border-box
}

*,
*::before,
*::after {
    box-sizing: inherit
}

img,
video {
    height: auto;
    max-width: 100%
}

iframe {
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

/*====Variable in CSS====*/
:root{
    /*====Color====*/
    --background-color:#EEEEED;
    --first-color:#FFFFFF;
    --secondary-color:#58606E;
    --field-color:#D0D6DD;
    --second-color-Main:#000000;
    --border-color:#DADEE3;
    --time-color-first:#F36F32;
    --time-color-second:#9CA2A8;
    --guest-color:#1F376C;
    --info-color:#3A4248;
    --danger-color:#FE635B;
    --border-color-Member:#9CA0B4;
    --success-color:#0BAA22;
    --primary-color:#3E88FB;
    --main-color:#FBFBFB;
    --third-color:#778396;
    --hover-color:#EAEAEA;
    /*====Font Family====*/
    --font-family-1: 'Poppins', sans-serif;
    --font-family-2: 'Sarabun', sans-serif;
    /*====Font Size====*/
    /*====Font Weight====*/
}

/*======Viewport======*/
@-ms-viewport {
    width: device-width !important;
}

/*====HTML====*/
html {
    font-size: 62.5% !important
}

/*====HTML Body====*/
body{
    letter-spacing: 0 !important;
    background-color: var(--background-color);
}

.container-fluid{
    padding-left: 0;
    padding-right: 0;
}

section{
    padding: 0;
    margin: 0;
}
/*====h1====*/
.Top {
    position: sticky;
    background-color: var(--border-color);
    color: var(--secondary-color);
    border-radius: 10px 10px 0px 0px;
    margin: 10px 18px 0px 20px;
    padding: 9px 0px 9px 15px;
    text-align: left;
    justify-content: left;
    font-family: var(--font-family-2);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.7rem;
}

/*====p1====*/
#p1 .title {
    font-family: var(--font-family-2);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--info-color);
    margin: 8px 0px 4px 20px;
    line-height: 2.5rem;
    text-align: left;
}

#p1 .detail {
    font-family: var(--font-family-2);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--secondary-color);
    margin: 0px 0px 10px 20px;
    line-height: 2.5rem;
    text-align: left;
}


/*====Booking-Detail====*/
#Booking-Detail .Booking {
    background-color: var(--first-color);
    height: 109px;
    margin: 0px 18px 0px 20px;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid var(--border-color);
}

#Booking-Detail .title {
    font-family: var(--font-family-2);
    font-size: 1.6rem;
    font-weight: 600;
    font-style: italic;
    text-align: left;
    line-height: 2.5rem;
    padding: 13px 0px 0px 15px !important;
    margin: 0;
}

#Booking-Detail form .split {
    width: 50%;
    position: absolute;
    margin: 0px 18px 0px 20px;
}

#Booking-Detail form .detail {
    font-family: var(--font-family-2);
    font-size: 1.3rem;
    font-weight: 400;
    text-align: left;
    line-height: 2.0rem;
    color: var(--secondary-color);
    margin-top: 6px;
}

#Booking-Detail form .box-left {
    left: 0;
}

#Booking-Detail form .box-left .detail {
    margin-left: 15px;
}

#Booking-Detail form .box-left select {
    font-family: var(--font-family-2);
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    line-height: 2.5rem;
    color: var(--second-color-Main);
    margin: 10px 25px 0px 15px;
    width: 75%;
    height: 26px;
    outline: none;
    border: none;
    border-bottom: 1px solid var(--field-color);
    cursor: pointer;
}

#Booking-Detail form .box-right {
    right: 0;
}

#Booking-Detail form .box-right input {
    font-family: var(--font-family-2);
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    line-height: 2.5rem;
    color: var(--second-color-Main);
    margin: 10px 0px 0px 0px;
    width: 50%;
    height: 26px;
    outline: none;
    border: none;
    border-bottom: 1px solid var(--field-color);
    cursor: pointer;
}

/*====main====*/
#Main .Main {
    background-color: var(--first-color);
    height: 786px;
    margin: 0px 18px 55px 20px;
    border-radius: 0px 0px 10px 10px;
}


/*====Info====*/
#Info .Info {
    height: 541px;
    border-bottom: 1px solid var(--border-color);
}


/*====Member====*/
#Member .Member {
    height: 180px;
    border-bottom: 1px solid var(--border-color);
    padding-left: 15px;
}

#Member .Member .title {
    font-family: var(--font-family-2);
    font-size: 1.9rem;
    font-weight: 600;
    text-align: left;
    line-height: 2.5rem;
    color: var(--info-color);
    padding: 15px 0px 0px 0px;
}

#Member .Member .detail {
    font-family: var(--font-family-2);
    font-size: 1.4rem;
    font-weight: 400;
    text-align: left;
    line-height: 2.5rem;
    color: var(--secondary-color);
    padding: 1px 0px 0px 0px;
}

#Member .Member form .M-Detail {
    font-family: var(--font-family-2);
    font-size: 1.5rem;
    font-weight: 500;
    text-align: left;
    line-height: 2.5rem;
    color: var(--info-color);
}

#Member .Member form input {
    font-family: var(--font-family-2);
    font-size: 1.5rem;
    font-weight: 500;
    text-align: left;
    line-height: 2.0rem;
    border-radius: 5px;
    border: 1px solid var(--border-color-Member);
    height: 41px;
}


#Member .Member form .col-sm-2 {
    display: flex;
}

#Member .Member form .col-sm-4 .form-control {
    outline: none;
    justify-content: center;
}

.Member input {
    cursor: pointer;
}

/*====Success====*/
#Success .Success {
    height: 65px;
    display: flex;
    Justify-content: space-between;
}

#Success .btn {
    font-family: var(--font-family-2);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2.0rem;
    color: var(--first-color);
    align-items: left;
    padding: 0;
    margin: 15px 10px 15px 0px;
    border-radius: 5px;
    width: 115px;
    height: 35px;
    border: none;
    outline: none;
    background-color: var(--success-color);
    cursor: pointer;
}

#Success .btn-Cancle {
    font-family: var(--font-family-2);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 2.0rem;
    color: var(--time-color-second);
    align-items: left;
    padding: 0;
    margin: 15px 0px 15px 15px;
    border-radius: 5px;
    width: 78px;
    height: 35px;
    border: none;
    outline: none;
    background-color:var(--border-color);
}

#Success .price{
    font-family: var(--font-family-2);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.0rem;
    color: var(--success-color);
    text-align: left;
    margin: 20px 15px 20px 0px;
    padding: 0;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Facilities Booking</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="HandheldFriendly" content="true">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="CSS/reset.css" />
        <link rel="stylesheet" href="CSS/style.css" />
    </head>

    <body>
        <section id="h1">
            <div class="container-fluid Top">
                <h1>
                    <span class="button" a href="#" style="cursor: pointer;">Facilities Booking Summary</span> | <span style="color: var(--primary-color);">Add Booking</span>
                </h1>
            </div>
        </section>



        <!--Description-->

        <section id="p1">
            <div class="title">Add Booking</div>
            <Div class="detail">Manage New Booking.</Div>
        </section>



        <!--Booking Detail-->

        <section id="Booking-Detail">
            <div class="container-fluid Booking">
                <div class="title">Booking Detail</div>
                <form>
                    <div class="BK-Detail">
                        <div class="split box-left">
                            <span class="detail">Facilities</span><br>
                            <select id="Facilities">
                                <option value="Facilities">Select facilities</option>
                                <option value="Billiard">Billiard Room</option>
                            </select>
                        </div>
                        <div class="split box-right">
                            <span class="detail">Check in Date</span><br>
                            <input type="date" id="date" name="date" />
                        </div>
                    </div>
                </form>
            </div>
        </section>



        <!--Main Info-->

        <section id="Main">
            <div class="container-fluid Main">
                <section id="Info">
                    <div class="container-fluid Info">
                        
                    </div>
                </section>


                <!--Member-->
                <section id="Member">
                    <div class="container-fluid Member">
                        <div class="title">Member</div>
                        <div class="detail">Register new Member.</div>
                        <form>
                            <div class="row">
                                <div class="col-sm-2">
                                    <label for="inputName" class="M-Detail">Member Name</label>
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" name="inputName" id="inputName" placeholder="9009211, Bernie Mewrun" required>
                                </div>
                                <div class="col-sm-2">
                                    <label for="CardNo" class="M-Detail">Smart Card No.</label>
                                </div>
                                <div class="col-sm-4">
                                    <input type="tel" class="form-control" name="CardNo" id="CardNo" placeholder="000000" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-2">
                                    <label for="email" class="M-Detail">Email Address</label>
                                </div>
                                <div class="col-sm-4">
                                    <input type="email" class="form-control" name="email" id="email" placeholder="Lorem lpsum@gmail.com" required>
                                </div>
                                <div class="col-sm-2">
                                    <label for="tel" class="M-Detail">Contact No.</label>
                                </div>
                                <div class="col-sm-4">
                                    <input type="tel" class="form-control" name="tel" id="tel" placeholder="XXXXXXXXXXX" required>
                                </div>
                            </div>
                        </form>
                    </div>
                </section>


                <!--Payment-->
                <section id="Success">
                    <div class="container-fluid Success">
                        <button class="btn btn-Cancle">Cancle</button>
                        <div class="green">
                            <p1 class="price">HK$20.00</p1>
                            <button class="btn btn-Cash">Cash</button>
                            <button class="btn btn-Octopus">Octopus</button>
                            <button class="btn btn-FPS">FPS</button>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </body>
</html>