i am a begninner of the wessite creation using html,css flexbox i have make the website header complete width of the website 1000px. header logo should start the position from 50px and nav bar start position from 600px.what i tried i attached below.it is displayed but i written correct or not please check me that
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Header Design</title><style> body { margin: 0; padding: 0; } .header { display: flex; width: 1000px; background-color: red; align-items: center; padding: 0 50px; /* Adjust padding to align the logo */ box-sizing: border-box; /* Ensure padding is included in width */ height: 100px; } .logo { flex: 0 0 auto; font-size: 24px; color: black; } .spacer { flex: 0 0 500px; /* Fixed spacer to push the nav */ } .nav { display: flex; gap: 20px; } .nav a { text-decoration: none; color: black; font-size: 18px; }</style></head><body><div class="header"><div class="logo">Logo</div><div class="spacer"></div><div class="nav"><a href="#">Home</a><a href="#">About</a><a href="#">Services</a><a href="#">Contact Us</a></div></div></body></html>