body { margin: 0; padding: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(/public/img/gg.png); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; } .navbar ul { list-style-type: none; padding: 0; margin: 0; } .navbar ul li { padding: 10px 0; } .navbar ul li a { display: block; text-decoration: none; color: white; padding: 10px 20px; } .content { margin-left: 250px; padding: 20px; box-sizing: border-box; /* Include padding and border in the width and height */ } .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 20px; max-width: 1200px; /* Set a maximum width for the container */ margin: 0 auto; /* Center the container */ margin-left: 0; color: white; } .widget { border: 1px solid #ddd; border-radius: 15px; padding: 20px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; /* Include padding and border in the width and height */ } .widget h1 { font-size: 50px; } #Asset-list { background-color: orange; } #Approve { background-color: mediumseagreen; } #Disapprove { background-color: firebrick; } #Request { background-color: blueviolet; } #Returned { background-color: #0fcaf1; } .widget .col { display: flex; justify-content: space-between; align-items: center; } .widget .col .icons { display: flex; font-size: 60px; padding: 15px; border-radius: 50px; /* background-color: darkgray; */ } .widget:hover { transform: translateY(-5px); transition: transform 0.2s ease; }