.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; padding: 10px; border-radius: 10px; } .playing { background-color: burlywood; } h2.bot { margin-top: 10px; margin-bottom: 0px; text-align: center; } .item { background-color: #80cbc4; border: 1px solid black; padding: 20px; font-size: clamp(1rem, -0.8750rem + 8.3333vw, 2rem); text-align: center; cursor: pointer; color: #073642 } .container2 { display: block; border-radius: 10px; padding: 10px; } .box { /* background-color: #fefefe;*/ margin: 15% auto; /* 15% from the top and centered */ padding: 20px; /*border: 1px solid #888;*/ width: 80%; /* Could be more or less, depending on screen size */ align-content: center; } /* The Modal (background) */ .modal { display: block; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { margin: 15% auto; /* 15% from the top and centered */ padding: 20px; width: 80%; /* Could be more or less, depending on screen size */ text-align: center; font-size: 32px; } body > div.container2 > input[type=text]:nth-child(2) { width: 512px; }