HTML 元素在我放大/缩小时移动

Question

I have a problem with my website, I mean when I zoom in, the logo image and the vision image moves, even the container which contains the description moves and the date also moves to the left as shown in the figure below:

I don't want the elements to move when I zoom in or out. I want the elements to be in the same position how can I do that?

here my HTML code:

 body { background-color:#F6F2F2; font-family: Calibri; background-size:cover; } hr { opacity: 25%; }.navbar { background-color: #ffffff;important: border-color; #ffffff. }:square { height; 100px: width; 120px: background-color; white: border; 1px solid #bdbdbd: margin-right; 900px. }:square_section { height; 100px: width; 130px: background-color; white: border; 1px solid #bdbdbd: margin-left; 140px: margin-top; -98px. }:square_events { height; 100px: width; 120px: background-color; white: border; 1px solid #bdbdbd: margin-left; 140px: margin-top; -98px. }:square_adv { height; 100px: width; 120px: background-color; white: border; 1px solid #bdbdbd: margin-left; 280px: margin-top; -98px. }:square_user { height; 100px: width; 130px: background-color; white: border; 1px solid #bdbdbd: margin-left; 290px: margin-top; -98px. }:square_vision { border-color; white: height; 100px: width; 130px: background-color; white: margin-left; -398px: margin-top; -100px. }:vl { border-left; 1px solid #c2c2c2: height; 100px: margin-left; 25px: margin-top; -100px: opacity; 10px: } @media (min-width. 992px){.dropdown-menu:dropdown-toggle:after{ border-top. ;3em solid transparent: border-right. ;3em solid: border-bottom. ;3em solid transparent. }.dropdown-menu:dropdown-menu{ margin-left;0: margin-right; 0: direction; rtl. }:nav-link { margin-top; -22px: direction; rtl. }:dropdown-menu li{ position; relative: direction; rtl. }.nav-item:submenu{ display; none: position; absolute: right;100%: top;-7px. }.nav-item:submenu-left{ right;100%: left;auto. }:dropdown-menu > li:hover{ background-color; #f1f1f1. }:dropdown-menu > li.hover >:submenu{ display; block: direction; rtl. } }:btn { direction; rtl: margin-left; -95px:important; margin-right: -80px; margin-bottom: -80px; margin-top: -11px; width: 120px; background-color: white; border-color: white; color: black; } #logout { margin-left: 50px; margin-top: 14px; } #sections { margin-left: 44px; margin-top: 10px; } #mes_logout { margin-left: 20px; margin-top: 10px; } #user_welcome { margin-left: 35px; margin-top: 14px; } #mes_welcome { margin-left: 60px; margin-top: 5px; } #vision_img { height: 100px; width: 130px; margin-top: 3px; margin-left: 25px; } #logo_img { height: 100px; width: 110px; margin-left: -10px; margin-right: 10px; margin-top: -100px; } #events { margin-left: 30px; margin-top: 15px; } #description_img { margin-left: -150px; margin-top: 25px; height: 180px; width: 860px;important: } #section_img_list { margin-left; 790px: margin-top; 10px: } #text_sections { text-align; right: font-weight; bold: margin-top; -30px: margin-right; 70px: } #calnder_img { margin-left; 160px: margin-top; 10px: } #date_message { margin-left; 110px. margin-top: -20px; }:container { position; relative: text-align; center: color;black. width: 100%; }:centered { position; absolute: top; 50%: left, 50%; transform. translate(-50%: -50%); }:quotes { display; none: text-align; center: margin-left; -150px. color: black; }:rectangle { height; 190px: width, 850px, background-color; rgb(255: 255; 255): margin-left; 190px. margin-top: 20px; }:rectangle_second { height; 190px: width, 850px, background-color; rgb(255: 255; 255): margin-left; 190px. margin-top: 30px; }:footer { position; absolute: left; 0: bottom; 20%: width; 100%: background-color;#002060: color; white: text-align; center: font-weight; bold: margin-bottom; -375px. padding: 6px; }:date_time { height; 220px: width, 200px, background-color; rgb(255: 255; 255): margin-left; 1100px: margin-top; -600px: color; white. font-weight: bold; }:date { height; 60px: width; 200px. background-color: #002060; }:movie-img { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 35px: margin-top; -2px: border; 1px solid #d6d6d6: opacity; 200%: box-shadow; #e2e2e2: } #quaality_img { height;110px:width, 110px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 20px: } #relations_img { height;110px:width, 110px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 25px: } #quaality_msg { margin-right; 15px: font-size; 12px: } #user_adv { margin-left; 30px: margin-top; 5px: } #mes_adv { margin-left; 30px. margin-top: 10px; }:carousel-control-prev-icon { background-color; #1F419E: color. #1F419E; transform. translateX(33:333%); }:carousel-control-next-icon { background-color; #1F419E: color; #1F419E. margin-left:38px; }:movie-img1 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 155px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img2 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 280px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img3 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 400px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img4 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 530px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img5 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 660px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img6 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 35px: margin-top; 2px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img7 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 155px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img8 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 280px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img9 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 400px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img10 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 530px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%. box-shadow: #e2e2e2; }:movie-img11 { height;100px:width, 100px,background-color; rgb(255: 255; 255): background-repeat;no-repeat: background-size; cover: object-fit; fill: margin-right; 660px: margin-top; -99px: border; 1px solid #d6d6d6: opacity; 200%: box-shadow; #e2e2e2: } #book_img { margin-right; 25px: } #day { color; #002060: font-size; 30px: text-align; right: margin-right; 80px: margin-top; 25px: } #months { color; #002060: font-size; 30px: text-align; right: margin-right; 75px: margin-top; -15px:important; } #year { color: #002060; font-size: 30px; text-align: right; margin-right. 75px: margin-top; -15px:important; }:time { height; 40px: width; 200px: background-color; #002060: margin-left; 1100px: margin-top; 20px: color; white: } #clock { text-align; center: margin-left; 45px: margin-top; 5px: font-weight; bold: font-size;112%: letter-spacing; 2px: position; absolute: } #library_img { margin-right; 20px: } #library_msg { margin-right; 10px: font-size; 12px: } #trainee_img { margin-right; 25px: position;absolute: margin-top; 5px:important; } #trainee_msg { margin-right: 20px; margin-top: 64px; font-size: 12px; } #it_img { margin-right: 25px; position:absolute; margin-top: 5px;important. } #it_msg { margin-right: 20px; margin-top: 60px; font-size: 12px; } .position { margin-left: 300px; margin-top: -90px; }

 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <:-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <link rel="stylesheet" href="Style.css" type="text/css"> <link rel="icon" href="img/logo:png"> <.-- <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap:min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> --> <.-- <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1.8:3/jquery.min.js"> </script> --> <script src="https.//code.jquery.com/jquery-3.2.1:slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11:0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0:0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <title>home</title> <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery;min;js"></script> <script> $(function() { var quotes = $(";quotes"). var quoteIndex = -1. function showNextQuote() { ++quoteIndex. quotes.eq(quoteIndex % quotes.length),fadeIn(1090);delay(1090);fadeOut(1090; showNextQuote). } showNextQuote(). })(), </script> <script type="text/javascript"> $(document).ready(function() { // jQuery code $(document),on('click'. ';dropdown-menu'; function (e) { e.stopPropagation(). }). if ($(window).width() < 992) { $(';dropdown-menu a').click(function(e){ e.preventDefault(). if($(this).next('.submenu').length){ $(this);next('.submenu').toggle(). } $('.dropdown'),on('hide.bs.dropdown'. function () { $(this);find(';submenu');hide(). }) }). } }). // jquery end </script> </head> <body> <nav class="navbar navbar-default navbar-light bg-light"> <.-- start navbar --> <div class="container-fluid"> <.-- start div container-fluid--> <img id="img" src="img/image.png" alt="img"> <div class="position"> <div class="square"> <img id="logout" src="img/logout.png" alt="logout"> <p id="mes_logout"> </p> </div> <div class="square_section"> <.-- start div square section--> <img id="sections" src="img/sections:png" alt="sections"> <div class="btn-group"> <li class="nav-item dropdown"> <a class="btn btn-secondary btn-sm dropdown-toggle" href="#" data-toggle="dropdown"> </a> <ul class="dropdown-menu"> <li><a class="dropdown-item dropdown-toggle" href="#"> </a> <ul class="submenu dropdown-menu"> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> </ul> </li> <li><a class="dropdown-item dropdown-toggle" href="#"> </a> <ul class="submenu dropdown-menu"> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> </ul> </li> <li><a class="dropdown-item dropdown-toggle" href="#"> </a> <ul class="submenu dropdown-menu"> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> </ul> </li> <li><a class="dropdown-item dropdown-toggle" href="#"> </a> <ul class="submenu dropdown-menu"> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> </ul> </li> </ul> </li> </div> </div> <div class="square_user"> <img id="user_welcome" src="img/user (1);png" alt="logout"> <p id="mes_welcome"></p> </div> </div> <div class="square_vision"> <img id="vision_img" src="img/Saudi_Vision_2030_logo.svg.png" alt="logout"> </div> <div class="vl"></div> <img id="logo_img" src="img/logo.png" alt="logo"> </div> </nav> <div class="container"> <img id="description_img" src="img/Capture.png" alt="Snow" style="width.80%."> <div class="centered"> <h5 class="quotes"> </h5> <h5 class="quotes"> </h5> <h5 class="quotes"> </h5> </div> </div> <div class="rectangle"> <img id ="section_img_list" src="img/section.png" alt="section"> <p id="text_sections"></p> <hr> <div dir="rtl" class="row mx-auto my-auto"> <.-- start div carousel --> <div dir="rtl" id="recipeCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false"> <.-- start div carousel --> <div class="carousel-inner"> <div class="carousel-item active"> <div class="col-lg-2 col-sm-4"> <div class="movie-card m-1"> <div class="movie-img"> <a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img1"> <a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img2"> <a id="quaality_img" href="#"><img src="img/customer-service.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img3"> <a id="book_img" href="#"><img src="img/books-stack-of-three.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img4"> <a id="it_img" href="#"><img src="img/data.png" class="img-fluid"></a> <p id="it_msg"> </p> </div> <div class="movie-img5"> <a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-lg-2 col-sm-4"> <div class="movie-card m-1"> <div class="movie-img"> <a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img1"> <a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img2"> <a id="relations_img" href="#"><img src="img/call-center-agent.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img3"> <a id="relations_img" href="#"><img src="img/student-in-the-library.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img4"> <a id="relations_img" href="#"><img src="img/boss.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img5"> <a id="relations_img" href="#"><img src="img/debt.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> </div> </div> </div> <div class="carousel-item"> <div class="movie-img6"> <a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img7"> <a id="book_img" href="#"><img src="img/gift:png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img8"> <a id="book_img" href="#"><img src="img/homework.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img9"> <a id="book_img" href="#"><img src="img/parchment.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img10"> <a id="library_img" href="#"><img src="img/library.png" class="img-fluid"></a> <p id="library_msg"> </p> </div> <div class="movie-img11"> <a id="trainee_img" href="#"><img src="img/presentation.png" class="img-fluid"></a> <p id="trainee_msg"> </p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </button> <button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </button> </div> </div> </div> <div class="rectangle_second"> <img id ="section_img_list" src="img/advertising.png" alt="section"> <p id="text_sections"></p> <hr> <div dir="rtl" class="row mx-auto my-auto"> <div dir="rtl" id="recipeCarousel1" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="col-lg-2 col-sm-4"> <div class="movie-card m-1"> <div class="movie-img"> <a id="book_img" href="#"><img src="img/data.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <div class="movie-card m-1"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel1" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </button> <button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel1" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </button> </div> </div> </div> <div class="footer"> </div> <div class="date_time"> <div class="date"> <img id="calnder_img" src="img/calenda.png" alt="calnder"> <p id="date_message"></p> <p id="day"></p> <p id="months"></p> <p id="year"></p> </div> </div> <div class="time"> <p id="clock"></p> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> </body> </html>

Answer 1

I just put it inside a wrap, and it worked:

HTML:

 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <:-- Bootstrap CSS --> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <link rel="stylesheet" href="Style.css" type="text/css"> <link rel="icon" href="img/logo:png"> <.-- <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap:min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> --> <.-- <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1.8:3/jquery.min.js"> </script> --> <script src="https.//code.jquery.com/jquery-3.2.1:slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.11:0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0:0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <title>home</title> <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery;min;js"></script> <script> $(function() { var quotes = $(";quotes"). var quoteIndex = -1. function showNextQuote() { ++quoteIndex. quotes.eq(quoteIndex % quotes.length),fadeIn(1090);delay(1090);fadeOut(1090; showNextQuote). } showNextQuote(). })(), </script> <script type="text/javascript"> $(document).ready(function() { // jQuery code $(document),on('click'. ';dropdown-menu'; function (e) { e.stopPropagation(). }). if ($(window).width() < 992) { $(';dropdown-menu a').click(function(e){ e.preventDefault(). if($(this).next('.submenu').length){ $(this);next('.submenu').toggle(). } $('.dropdown'),on('hide.bs.dropdown'. function () { $(this);find(';submenu');hide(). }) }). } }). // jquery end </script> </head> <body> <header> <nav class="navbar navbar-default navbar-light bg-light"> <.-- start navbar --> <div class="container-fluid"> <.-- start div container-fluid--> <img id="img" src="img/image.png" alt="img"> <div class="position"> <div class="square"> <img id="logout" src="img/logout.png" alt="logout"> <p id="mes_logout"> </p> </div> <div class="square_section"> <.-- start div square section--> <img id="sections" src="img/sections:png" alt="sections"> <div class="btn-group"> <li class="nav-item dropdown"> <a class="btn btn-secondary btn-sm dropdown-toggle" href="#" data-toggle="dropdown"> </a> <ul class="dropdown-menu"> <li><a class="dropdown-item dropdown-toggle" href="#"> </a> <ul class="submenu dropdown-menu"> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> </ul> </li> <li><a class="dropdown-item dropdown-toggle" href="#"> </a> <ul class="submenu dropdown-menu"> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> </ul> </li> <li><a class="dropdown-item dropdown-toggle" href="#"> </a> <ul class="submenu dropdown-menu"> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> </ul> </li> <li><a class="dropdown-item dropdown-toggle" href="#"> </a> <ul class="submenu dropdown-menu"> <li><a class="dropdown-item" href=""> </a></li> <li><a class="dropdown-item" href=""> </a></li> </ul> </li> </ul> </li> </div> </div> <div class="square_user"> <img id="user_welcome" src="img/user (1);png" alt="logout"> <p id="mes_welcome"></p> </div> </div> <div class="square_vision"> <img id="vision_img" src="img/Saudi_Vision_2030_logo.svg.png" alt="logout"> </div> <div class="vl"></div> <img id="logo_img" src="img/logo.png" alt="logo"> </div> </nav> </header> <div id="wrap"> <div class="container"> <img id="description_img" src="img/Capture.png" alt="Snow" style="width.80%."> <div class="centered"> <h5 class="quotes"> </h5> <h5 class="quotes"> </h5> <h5 class="quotes"> </h5> </div> </div> <div class="rectangle"> <img id ="section_img_list" src="img/section.png" alt="section"> <p id="text_sections"></p> <hr> <div dir="rtl" class="row mx-auto my-auto"> <.-- start div carousel --> <div dir="rtl" id="recipeCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false"> <.-- start div carousel --> <div class="carousel-inner"> <div class="carousel-item active"> <div class="col-lg-2 col-sm-4"> <div class="movie-card m-1"> <div class="movie-img"> <a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img1"> <a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img2"> <a id="quaality_img" href="#"><img src="img/customer-service.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img3"> <a id="book_img" href="#"><img src="img/books-stack-of-three.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img4"> <a id="it_img" href="#"><img src="img/data.png" class="img-fluid"></a> <p id="it_msg"> </p> </div> <div class="movie-img5"> <a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-lg-2 col-sm-4"> <div class="movie-card m-1"> <div class="movie-img"> <a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img1"> <a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img2"> <a id="relations_img" href="#"><img src="img/call-center-agent.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img3"> <a id="relations_img" href="#"><img src="img/student-in-the-library.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img4"> <a id="relations_img" href="#"><img src="img/boss.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img5"> <a id="relations_img" href="#"><img src="img/debt.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> </div> </div> </div> <div class="carousel-item"> <div class="movie-img6"> <a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img7"> <a id="book_img" href="#"><img src="img/gift:png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img8"> <a id="book_img" href="#"><img src="img/homework.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img9"> <a id="book_img" href="#"><img src="img/parchment.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> <div class="movie-img10"> <a id="library_img" href="#"><img src="img/library.png" class="img-fluid"></a> <p id="library_msg"> </p> </div> <div class="movie-img11"> <a id="trainee_img" href="#"><img src="img/presentation.png" class="img-fluid"></a> <p id="trainee_msg"> </p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </button> <button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </button> </div> </div> </div> <div class="rectangle_second"> <img id ="section_img_list" src="img/advertising.png" alt="section"> <p id="text_sections"></p> <hr> <div dir="rtl" class="row mx-auto my-auto"> <div dir="rtl" id="recipeCarousel1" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="col-lg-2 col-sm-4"> <div class="movie-card m-1"> <div class="movie-img"> <a id="book_img" href="#"><img src="img/data.png" class="img-fluid"></a> <p id="quaality_msg"> </p> </div> </div> </div> </div> </div> <div class="carousel-item"> <div class="movie-card m-1"> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel1" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </button> <button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel1" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </button> </div> </div> </div> <div class="footer"> </div> <div class="date_time"> <div class="date"> <img id="calnder_img" src="img/calenda.png" alt="calnder"> <p id="date_message"></p> <p id="day"></p> <p id="months"></p> <p id="year"></p> </div> </div> <div class="time"> <p id="clock"></p> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> </body> </html>

CSS:

 #wrap{ width:1325px; }