Yes, that would be one way to do it.
1 Like
Forgot to mention display:flex along with that.
display: flex is prerequisite to using flex-wrap, so that that should go without saying. 
1 Like
So I have this
/* media queries */
@media screen and (max-width: 800px) {
.columns {
flex-direction: column;
}
.column {
margin: 10px 0;
}
.main-column {
order: -1;
}
.nav ol {
list-style: none;
line-height:0px;
padding: 8.5px;
padding-left:9px;
padding-right:9px;
margin: 1rem auto;
display: flex;
justify-content: space-between;
max-width: 400px;
background: rgba(0, 0, 0, 0.3);
}
}
I put the nav ol in there, nothing is changing when I try to make changes. I had changed the max-width to 400 from the original 400, to see what would happen, and nothing did. I don’t know why it’s not working. I tried to Google on it, but can’t find anything about the problem.
Ok never mind that. I added this :
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.nav ol {
list-style: none;
line-height:0px;
padding: 0.531em;
padding-left:0.563em;
padding-right:0.563em;
margin: 1rem auto;
display: flex;
flex-wrap:wrap;
max-width:100%;
min-width:50%;
justify-content: space-between;
background: rgba(0, 0, 0, 0.3);
}
Looks like it’s working now.
. Now to fix the 
My eureka moment. Not sure why the screen shot is like this, cause margin on both sides on my phone show evenly. Running into an overlap issue now, here…
Here’s the code again :
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.nav {
text-transform: capitalize;
letter-spacing: 0.25em;
font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
font-size: 4.5vw;
font-weight: 900;
text-align:center;
}
.nav ol {
list-style: none;
line-height:0em;
padding: 0.531em;
padding-left:0.563em;
padding-right:0.563em;
margin: 0 3.1em; /* play with this for mobile */
display: flex;
flex-wrap:wrap;
justify-content: space-between;
width:100vw;
height: auto;
background: rgba(0, 0, 0, 0.3);
}
.nav li {
display: inline-block;
}
.nav a {
color: rgba(153,153,153,0.5);
font-weight: 900;
transition-duration: 0.3s;
transition-timing-function: linear, ease-in-out;
text-decoration: none;
}
.columns {
flex-direction: column;
margin: 0 7.40em; /* play with this for mobile */
width:100vw;
}
.column {
margin: 0.625em 0;
}
.main-column {
order: -1;
}
figure {
margin: 0;
border: 3px ridge black;
padding: 0.5em 0.5em 0.2em 0.5em;
}
.tagline {
margin: 0 1em;
width:100%;
}
.header {
width:100%;
text-align: center;
}
}
What does this rule say to you?
.nav ol {
margin: 0 3.1em;
width:100vw;
}
How can you have a horizontal margin and a 100vw width.
100vw is the complete width of the viewport there is no room for margins so something has to give.
It looks like you don’t actually need a width there at all anyway.
1 Like
@PaulOB so either get rid of the margin, or width.
Try it and see which suits best 
1 Like
How can you have a horizontal margin
I was using it to center the nav. 
. Tried eliminating it and use only width, but that did not satisfy my centering needs.
That wasn’t what Paul asked. He asked
That’s a different question altogether.
3 Likes
Right. Ok, so they’re two different things and do different things.
You are not understanding the basic CSS box model.
If the viewport is say 320px wide and your element is 100vw then the element is 320px wide. There is no space at the side for a margin. The element becomes over-constrained and something has to give.
If you have an element that is 100% wide and you give it 50px margins then the only space it can fit inside will be 100% + 100px. That is exactly 100px too big for any normal container. You can’t have more space on the inside than on the outside unless you are in the fifth dimension perhaps.
2 Likes
@PaulOB ok. I tried to make an example of what you’re saying, and I think I now can see what’s happening…
Tried removing width:, but still not centered. I have align-items:center;. I’ll try doing margin: 0 auto:
It won’t have any effect on an element that is 100% wide.
Look at parent elements.
Ok, looking at this
.nav {
text-transform: capitalize;
letter-spacing: 0.25em;
line-height:0.5em;
font-family: Fertigo Pro, Segoe UI, Arial, Verdana;
font-size: 4.5vw;
font-weight: 900;
text-align:center;
}
Look at header.
1 Like
@PaulOB gotcha, I see the catch
.header {
width:100%; <---
}