I can't find why flex-end isn't working on my site, I know there's something interrupting it but I just can't manage to find it.
For anyone interested in helping here's the code, I'm trying to only align navbar-links-end and navbar-links-middle to end of navbar :
That's all details you should know, if there's anything else just post a comment, I will answer as soon as I can
body {
font-family: 'Roboto', sans-serif;
}
.navbar {
top: 0;
left: 0;
display: flex;
flex-direction: row;
position: fixed;
background: white;
margin-left: auto;
border-bottom: 1px solid black;
width: 70px;
height: 70px;
}
.navbar-logo {
justify-content: flex-start;
}
.navbar-links-left {
display: flex;
justify-content: flex-start;
list-style-type: none;
align-items: center;
/* add this property */
width: auto;
}
.navbar-link {
margin-right: 2rem;
color: #0068b5;
font-size: 16px;
align-items: center;
}
.navbar-links-middle {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center;
/* add this property */
width: auto;
}
.navbar-links-end {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center;
/* add this property */
margin-left: auto;
width: auto;
}
<nav class="navbar">
<img class="navbar-logo" src="images/intel-header-logo.png">
<ol class="navbar-links-left">
<li class="navbar-link">
<p>PRODUCTS</p>
</li>
<li class="navbar-link">
<p>SUPPORT</p>
</li>
<li class="navbar-link">
<p>SOLUTIONS</p>
</li>
<li class="navbar-link">
<p>DEVELOPERS</p>
</li>
<li class="navbar-link">
<p>PARTNERS</p>
</li>
</ol>
<ol class="navbar-links-middle">
<li class="navbar-link">
<i class="far fa-user"></i>
</li>
<li class="navbar-link">
<i class="fa-solid fa-globe"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>USA (ENGLISH)</p>
</li>
</ol>
<ol class="navbar-links-end">
<li class="navbar-link">
<i class="fa-solid fa-magnifying-glass"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>Search: Intel.com</p>
</li>
</ol>
</nav>
Why do you have .navbar{width:70px}
? It should be 100%
:
body {
font-family: 'Roboto', sans-serif;
}
.navbar {
top: 0;
left: 0;
display: flex;
flex-direction: row;
position: fixed;
background: white;
margin-left: auto;
border-bottom: 1px solid black;
width: 100%;
height: 70px;
}
.navbar-logo {
justify-content: flex-start;
}
.navbar-links-left {
display: flex;
justify-content: flex-start;
list-style-type: none;
align-items: center; /* add this property */
width: auto;
}
.navbar-link {
margin-right: 2rem;
color: #0068b5;
font-size: 16px;
align-items: center;
}
.navbar-links-middle {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center; /* add this property */
width: auto;
}
.navbar-links-end {
display: flex;
justify-content: flex-end;
list-style-type: none;
align-items: center; /* add this property */
margin-left: auto;
width: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<nav class="navbar">
<img class="navbar-logo" src="images/intel-header-logo.png">
<ol class="navbar-links-left">
<li class="navbar-link">
<p>PRODUCTS</p>
</li>
<li class="navbar-link">
<p>SUPPORT</p>
</li>
<li class="navbar-link">
<p>SOLUTIONS</p>
</li>
<li class="navbar-link">
<p>DEVELOPERS</p>
</li>
<li class="navbar-link">
<p>PARTNERS</p>
</li>
</ol>
<ol class="navbar-links-middle">
<li class="navbar-link">
<i class="far fa-user"></i>
</li>
<li class="navbar-link">
<i class="fa-solid fa-globe"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>USA (ENGLISH)</p>
</li>
</ol>
<ol class="navbar-links-end">
<li class="navbar-link">
<i class="fa-solid fa-magnifying-glass"></i>
</li>
<li class="navbar-link" style="white-space: nowrap;">
<p>Search: Intel.com</p>
</li>
</ol>
</nav>
</body>
</html>