fixes some position of elements in header

[Dakshsharma1108]

---

name: Pull Request
about: Submit changes to the Sugar Labs website for review

📝 Description

it will fix some position of element in header like toggle and try now button.
before these elements overlaping each other but after this it will this problem.

🔗 Related Issue

solves Part of #499

🔄 Type of Change

• 🎨 UI/UX Update (visual changes, styling improvements)
• 🐛 Bug Fix

📷 Visual Changes

Before

After making changes

🧪 Testing Performed

📱 Browser Compatibility

• [ ]Operating System: Windows 10
• [ ]Browser: Chrome
• [ ]Screen resolution: 1920x1080
• [ ]Version: 118.0.5993.117

🖥️ Responsive Design

• Desktop width(1024-1224)

✅ Test Cases

1. change of screen sizes

♿ Accessibility

• Proper heading hierarchy maintained
• ARIA labels added where needed
• Color contrast requirements met
• Keyboard navigation works correctly
• Screen reader testing performed

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• I have updated the documentation accordingly
• My changes generate no new warnings or console errors
• I have added tests that prove my fix/feature works
• All existing tests pass successfully
• I have checked for and resolved any merge conflicts
• I have optimized images/assets (if applicable)
• I have validated all links are working correctly

💭 Additional Notes

---

📚 Reviewer Resources

• Contributing Guide
• Style Guide
• Community Chat

Thank you for contributing to the Sugar Labs website! 🎉

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Code formatting issues detected

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[Dakshsharma1108]

this is final pr @sa-fw-an

[jagpreetrahi]

Hey @Dakshsharma1108 , I would like to suggest a solution to pass all the checks of the PR.
Currently, the issue is related to the prettier check in the following file
src/sections/Header.tsx
So, this run prettier with --write to fix.

[Dakshsharma1108]

Got it @jagpreetrahi

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏