Question posted in 
So I just began my programing journey, and in the course that I’m in, I just got tasked with fixing a broken website by myself without the course guidance. I was excited to test myself with what I had already learned… until I came across a brick wall.
So within my HTML file what I’m trying to manipulate is written as follows:
<header>
<div class="content">
<a href="index.html" class="desktop logo">Fotomatic</a>
<nav class="desktop">
<ul>
<li><a href="#">Product detail</a></li>
<li><a href="#">About us</a></li>
<li>
<a href="https://www.instagram.com/"
>Follow us
<img class="icon" src="./resources/images/instagram.png"
/></a>
</li>
</ul>
</nav>
On the website the idea is that the "Fotomatic" should stay on the left of the nav and the <ul> elements should go to the right of the nav. Here is a mockup of how it should look like:
My CSS for my current build are as follows:
header {
position: fixed;
width: 100%;
border-bottom: solid 1px #c6c1c1;
background-color: white;
z-index: 1;
}
header .content {
display: flex;
align-items: center;
padding: 1.875rem;
}
header .desktop {
font-family: Roboto-Mono-Regular;
font-size: 2rem;
color: #4a4a4a;
}
header nav ul {
display: flex;
font-size: 1rem;
font-family: Roboto-Regular;
line-height: 1.6;
}
nav li {
padding-left: 3.5rem;
}
nav a {
vertical-align: bottom;
line-height: 1.6;
font-size: 1rem;
color: #4a4a4a;
}
header .icon {
width: 1rem;
padding-left: .75rem;
}
The CSS rules above provide this result:
Now, given that it is my first encounter with flexboxes I did some research of my own.
I tried many things, from simple ideas like just floating the <ul> element right, text-align, all the way to trying to manipulate flexboxes.
The closes that I got to what I wanted was with the margin CSS rule line like so:
header .desktop {
font-family: Roboto-Mono-Regular;
font-size: 2rem;
color: #4a4a4a;
margin-left: auto;
}
The CSS rules above provided this result:
Result of margin-left: auto; rule on the parent .desktop
The result I got with that is that the entire box get’s pulled, not only the <ul> elements, but the “Fotomatic" <a> as well.
Now, even though this is not the result I expected, as far as I understand it behaved that way because the <a> element is a child to .desktop as well.
So I tried the same margin-left:auto; only in the <ul> elements but nothing happens:
header nav ul {
display: flex;
font-size: 1rem;
font-family: Roboto-Regular;
line-height: 1.6;
margin-left: auto;
}
Result of margin-left: auto; rule on <ul>, child to .desktop
My assumption is that either I’m not correctly understanding how flexboxes work yet, or there is another CSS rule that is not letting me manipulate the header nav <ul> like I would expect.
Any other instances where the header has CSS rules are within a @media rule where the screen-size is smaller, so I don’t believe those are a problem at all so I did not include them to keep this question as "short" as possible.
I know the answer is probably staring me in the face, but I cannot seem to find it.
Thank you all in advance!
2
Answers
Your idea of using margin:left; is correct and works, however, it should be added to the nav and not the ul. Here is a working example:
A right margin of 30px has been added to the nav as desired in the mockup
The example does not produce the same as your screenshot as you have excluded some css, but this should still give the desired output when added.
Also, I added the css to .content nav, and I recommend that you alter the rest of the css to include either the class name or the header tag for specifity as it will help later on in the page.
In a flexbox with two child elements, to justify the first child to the left and the second child to the right, use
justify-content: space-between.