Below i attached what my CSS looks like my webpage is a mixture of an audio player, an embedded twitter link and a few videos. when i open my webapage on my iphone the items appear centred but when i flip my phone horizontal I want the items to then respond into two columns rather than just a single column with an uneven amount of space on the right side of the page. I also want my webpage to respond when i open it on a ipad or macbook with the max amount of columns appearing being three and when the browser begins too shrink the webpage responds to a single column all while remaining centred please help me
<body><div class="container-wrapper"><div class="header"><h1>Cant Die Yet</h1></div><div class="grid"><div class="grid-item"><div class="container"><h2 id="music-title"></h2><h3 id="artist-title"></h3><div class="player-progress" id="player-progress"><div class="progress" id="progress"></div><div class="music-duration"><span id="current-time">0:00</span><span id="duration">0:00</span></div></div><div class="player-controls"><i class='bx bx-rewind' title="Previous" id="prev"></i><i class='bx bx-play' title="Play" id="play"></i><i class='bx bx-fast-forward' title="Next" id="next"></i></div></div></div><div class="grid-item"><video autoplay loop muted playsinline width="400" height="420"> <source src="video/C2.mp4" type="video/mp4"></video> </div><div class="grid-item"><video autoplay loop muted playsinline width="400" height="420"> <source src="video/CASHA MAIN2.mp4" type="video/mp4"></video> </div><div class="grid-item"><video autoplay loop muted playsinline width="400" height="420"> <source src="video/VANESSA1.mp4" type="video/mp4"></video> </div><div class="grid-item"><a class="twitter-timeline" data-width="350" data-height="300" href="https://twitter.com/cashbreed?ref_src=twsrc%5Etfw"></a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></div> </div></div></div><script src="index.js"></script></body></html>* { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; overflow-x: hidden; margin: 0; padding: 0; } body { background-color: white; justify-content: center; display: flex; justify-content: center; } .header { display: flex; justify-content: center; align-items: center; width: 100%; padding: 35px 5%; font-family: 'Luxurious Script', cursive; font-size: 15px; position: sticky; position: -webkit-sticky; top: 0; z-index: 99; background-color: white; } .container-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; } .grid { display: grid; justify-content: center; align-items: center; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: center; width: 100%; max-width: 1200px; padding: 20px; margin: 20px; } .grid-item { width: 100%; max-width: 300px; height: 320px; padding: 10px; display: flex; justify-content: center; align-items: center; margin: 40px; } .grid-item video, .grid-item .container { width: 100%; height: 100%; max-width: 300px; } .container { width: 100%; height: 300px; background-color: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all 0.5s ease; } .container:hover{ box-shadow: 0 10px 20px rgb(0, 0, 0, 0.4); } h2 { font-size: 20px; text-align: center; font-family: "Roboto", sans-serif; font-weight: 600; } h3 { font-size: 20px; text-align: center; font-family: "Roboto", sans-serif; font-weight: 100; } .player-progress { background-color: lightgray; border-radius: 5px; cursor: pointer; margin: 40px 20px 35px; height: 6px; width: 95%; } .progress{ background-color: black; border-radius: 5px; height: 100%; width: 0%; transition: width 0.1s linear; } .music-duration{ position: relative; top: -25px; display: flex; justify-content: center; align-items: center; letter-spacing: 2px; font-family: "Abel", sans-serif; font-size: small; } .music-duration span { margin: 0 10px; } .player-controls{ display: flex; justify-content: center; top: -15px; left: 120px; width: 200px; } .bx { font-size: 30px; color: darkgrey; cursor: pointer; user-select: none; transition: all 0.3 ease; } .bx:hover{ filter: brightness(40%) } audio-player { width: calc(100% - 40px) ; box-sizing: border-box; } video{ border-radius: 20px; overflow: hidden; } @media (max-width: 1200px) { .container-wrapper { padding: 0 20px; } } @media (max-width: 599px) { .grid-item { margin: 10px 0; } }Ive tried adjusting the margins and everything but it either just pushes my items off the screen when viewing on phone and nothing else seems to work or make a difference in responsiveness