HTML Semantic Tags Not Rendering Properly in Safari - Inconsistent Behavior
I'm experiencing an issue with semantic HTML tags not rendering as expected in Safari. Specifically, I have a simple structure using `<header>`, `<section>`, and `<footer>` tags, but the styles I applied are not reflecting correctly in Safari. My CSS uses Flexbox to lay out the items horizontally, and while it looks perfect in Chrome and Firefox, in Safari, the sections are stacking vertically instead of aligning as intended. Here's the relevant portion of my HTML: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Semantic Layout</title> </head> <body> <header> <h1>My Website</h1> </header> <section class="content"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </section> <footer> <p>Footer Content</p> </footer> </body> </html> ``` And my CSS: ```css body { display: flex; flex-direction: column; height: 100vh; } header, footer { background: lightgrey; padding: 10px; } .content { display: flex; flex: 1; justify-content: space-around; } .box { background: deepskyblue; padding: 20px; width: 100px; } ``` After some debugging, I noticed that in Safari, there seems to be a default margin on the `<body>`, causing the layout to shift. I tried resetting the margins with `* { margin: 0; padding: 0; }`, but it didn't resolve the issue. Furthermore, I'm also seeing warnings in the console about flexbox properties being unsupported in certain older versions of Safari, but I believe I'm testing in version 14.1. Any ideas on how to resolve this rendering inconsistency in Safari while maintaining the expected layout in other browsers?