I've been struggling with this navbar for a while now. The latest issue I'm facing is proving to be quite challenging.
The problem at hand is getting the navbar centered without affecting the positioning of other elements around it. If you check my previous questions on this topic, you'll see that I was dealing with the navbar overflowing and pushing all other elements down. While I managed to solve that problem, I've encountered a new one now.
Below is the complete HTML code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Smileybook</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900&display=swap" rel="stylesheet">
... (More HTML code here) ...
</head>
</body>
</html>
And here are the CSS codes for the navbar:
.header-container {
display: flex;
max-width: 100%;
margin-top: 10px;
flex-wrap: wrap;
}
#nav-1 {
position: relative;
border: none;
... (more CSS styles here) ...
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: -webkit-box;
display: flex;
... (more CSS styles here) ...
}
I would appreciate any assistance you can provide as soon as possible.