Adding navbar to centred elements using display property - html

Question

I am trying to centre and overall set elements using css display property but i encountered a problem.
Once i added a navbar as an element whole structure got changed it's place.
Here is the code before i added navbar:
body {
display: flex;
justify-content: center;
}
.content {
display: inline-flex;
width: 600px;
height: 100%;
border-width: 1px;
justify-content: center;
}
.nav {
width: 100%;
height: 100px;
border-width: 1px;
background-color: #000000;
display: block;
}
.menu {
display: inline-block;
width: 200px;
height: 100%;
background-color: #3F4E62;
}
.article {
display: inline-block;
width: 380px;
height: 100%;
background-color: #dddddd;
}
.item{
color: #FFFFFF;
font-family: Georgia;
display: block;
}
<div class="content"><div class="menu"><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a></div><div class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis non eros pellentesque
commodo. Phasellus elit mauris, ultricies ac sem volutpat, efficitur convallis nibh. Mauris rutrum
odio nec justo rutrum, sit amet tristique sapien tristique. Nullam ac urna eget tortor suscipit blandit.
Maecenas pharetra faucibus odio quis feugiat. Curabitur a commodo arcu, a pellentesque lorem.
Nulla facilisi. Nullam augue metus, scelerisque sed pulvinar at, fermentum sit amet arcu. Morbi
lobortis suscipit porttitor. In vel tristique lorem, vitae pulvinar sapien. Nullam pretium imperdiet
nibh, eu bibendum arcu egestas ac. Vestibulum faucibus fringilla justo. Nam facilisis
elementum ex, ut fermentum leo feugiat vulputate. Ut molestie, enim ac faucibus mollis, est turpis
varius lectus, at sollicitudin erat ligula vitae tortor. Ut tincidunt sed sem in sodales. Cras tincidunt
ligula diam, quis volutpat quam cursus nec.
</div></div>
Navbar was supposed to be a line across whole window but it got stuck inline with elements from div with class="content".
Here is the code when i added navbar:
body {
display: flex;
justify-content: center;
}
.content {
display: inline-flex;
width: 600px;
height: 100%;
border-width: 1px;
justify-content: center;
}
.nav {
width: 100%;
height: 100px;
border-width: 1px;
background-color: #000000;
display: block;
}
.menu {
display: inline-block;
width: 200px;
height: 100%;
background-color: #3F4E62;
}
.article {
display: inline-block;
width: 380px;
height: 100%;
background-color: #dddddd;
}
.item{
color: #FFFFFF;
font-family: Georgia;
display: block;
}
<div class="nav">Navbar</div>
<div class="content"><div class="menu"><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a></div><div class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis non eros pellentesque
commodo. Phasellus elit mauris, ultricies ac sem volutpat, efficitur convallis nibh. Mauris rutrum
odio nec justo rutrum, sit amet tristique sapien tristique. Nullam ac urna eget tortor suscipit blandit.
Maecenas pharetra faucibus odio quis feugiat. Curabitur a commodo arcu, a pellentesque lorem.
Nulla facilisi. Nullam augue metus, scelerisque sed pulvinar at, fermentum sit amet arcu. Morbi
lobortis suscipit porttitor. In vel tristique lorem, vitae pulvinar sapien. Nullam pretium imperdiet
nibh, eu bibendum arcu egestas ac. Vestibulum faucibus fringilla justo. Nam facilisis
elementum ex, ut fermentum leo feugiat vulputate. Ut molestie, enim ac faucibus mollis, est turpis
varius lectus, at sollicitudin erat ligula vitae tortor. Ut tincidunt sed sem in sodales. Cras tincidunt
ligula diam, quis volutpat quam cursus nec.
</div></div>

Answer 1

Leave the body tag and add another div class="main-container"> name it whatever you want with the following style. You're missing the flex-flow: or flex-wrap so the elements are not wrapping and you basically need them to wrap.
.main-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
Here check this:
.main-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.content {
display: inline-flex;
width: 600px;
height: 100%;
border-width: 1px;
justify-content: center;
}
.nav {
width: 100%;
height: 100px;
border-width: 1px;
background-color: #000000;
display: block;
}
.menu {
display: inline-block;
width: 200px;
height: 100%;
background-color: #3f4e62;
}
.article {
display: inline-block;
width: 380px;
height: 100%;
background-color: #dddddd;
}
.item {
color: #ffffff;
font-family: Georgia;
display: block;
}
<div class="main-container">
<div class="nav">Navbar</div>
<div class="content">
<div class="menu"><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a><a class="item">MENU ITEM</a></div>
<div class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis non eros pellentesque commodo. Phasellus elit mauris, ultricies ac sem volutpat, efficitur convallis nibh. Mauris rutrum odio nec justo rutrum, sit amet tristique sapien tristique.
Nullam ac urna eget tortor suscipit blandit. Maecenas pharetra faucibus odio quis feugiat. Curabitur a commodo arcu, a pellentesque lorem. Nulla facilisi. Nullam augue metus, scelerisque sed pulvinar at, fermentum sit amet arcu. Morbi lobortis suscipit
porttitor. In vel tristique lorem, vitae pulvinar sapien. Nullam pretium imperdiet nibh, eu bibendum arcu egestas ac. Vestibulum faucibus fringilla justo. Nam facilisis elementum ex, ut fermentum leo feugiat vulputate. Ut molestie, enim ac faucibus
mollis, est turpis varius lectus, at sollicitudin erat ligula vitae tortor. Ut tincidunt sed sem in sodales. Cras tincidunt ligula diam, quis volutpat quam cursus nec.
</div>
</div>
</div>