I'm currently using Wordpress with Elementor to create my website. I'm having troubles using my CSS code. I have little experience with using CSS but I managed to have ChatGPT create me a CSS code. Basically when I try to use the code it makes a weird transition where my header comes from the side when I scroll past 200PX. I want the header to just come straight downwards. I did notice when I remove: left: 50%; transform: translateX(-50%); It will transitions normal, but then my header is not aligned to the center. Code: `/* Styles for the header */ .header1 { transition: all 0.15s ease-in-out; width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } /* Styles for when scrolled */ .header1.scrolled { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 1200px; border: 1px solid black; border-radius: 50px; background-color: #fff; /* Adjust as needed */ box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000; } /* Responsive adjustments */ @media (max-width: 768px) { .header1.scrolled { width: 95%; padding: 5px 10px; } /* Adjust logo size if needed */ .header1 .logo img { max-width: 150px; /* Adjust as needed */ } /* Adjust menu items if needed */ .header1 .menu-item { font-size: 14px; /* Adjust as needed */` } } /* Ensure content below header is not hidden when header is fixed */ body.has-scrolled-header { padding-top: 100px; /* Adjust based on your header height */ I have tried to use ChatGPT and Claude to adjust the issue, but it seems to not resolve it.