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; font-family: Arial, sans-serif; } .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; } .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 20px; max-width: 1200px; margin: 0 auto; margin-left: 0; /* Add this line to set the left margin */ 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; } #Available { background-color: mediumseagreen; } #Disable { background-color: firebrick; } #Return { background-color: #0fcaf1; } #Borrowing { background-color: #5a6268; } .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; }