#myBoxContainer { display: flex; justify-content: center; align-items: center; height: 100vh; } #myBox { border: 1px solid #ccc; padding: 20px; width: 800px; background-color: #f1ee06; justify-content: center; align-items: center; border-radius: 20px; } h2 { font-size: 18px; margin-bottom: 10px; } label { display: block; margin-bottom: 5px; border-radius: 20px; } input { width: 100%; padding: 5px; margin-bottom: 10px; border-radius: 20px; } .confirm { background-color: #007bff; color: #fff; border: none; border-radius: 20px; padding: 10px 20px; cursor: pointer; } .back { background-color: #ff0000; color: #fff; border: none; border-radius: 20px; padding: 10px 20px; cursor: pointer; } .logo-container { display: flex; justify-content: center; align-items: center; height: 100px; text-decoration: none; color: white; font-weight: bold; font-size: 24px; padding-top: 20px; } body { margin: 0; padding: 0; background-color: #92E3A9; } .sidebar { width: 250px; background-color: #333; color: white; height: 100%; position: fixed; } .logo a { display: flex; justify-content: center; align-items: center; height: 100px; text-decoration: none; color: white; font-weight: bold; font-size: 24px; padding-top: 20px; } .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; /* Ensure content doesn't overlap sidebar */ padding: 20px; } .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; padding: 20px; } .widget { background-color: gray; border: 1px solid #ddd; border-radius: 5px; padding: 20px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .card { width: 150px; background-color: gray; box-shadow: 5px 5px 20px 5px rgba(0, 0, 0, 0.3); }