Adding space between divs in flexbox - html

Question

I want to ask about good practive in making spacing between two divs which have flexbox. For example:
header {
background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9);
height: 80px;
}
.menu-section {
display: flex;
}
.nav-logo {
color: #e00986;
font-size: 25px;
margin: 0;
padding-left: 15px;
line-height: 80px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
nav ul li {
display: inline-block;
width: 150px;
position: relative;
}
nav ul li a {
text-decoration: none;
line-height: 80px;
padding: 0 10px;
display: block;
color: #e00986;
}
nav ul li a:hover {
color: #FFF;
transition-duration: 2s;
}
<header>
<nav class="menu-section">
<h1 class="nav-logo">Love &#9825 Cookies</h1>
<ul>
<li>Strona główna</li>
<li>Ciastka
<ul>
<li>Torty</li>
<li>Babeczki</li>
<li>Bezy</li>
<li>Ciasta</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
Of course I can give margin-left: 550px to nav ul and it will be okay, but I don't think so that is the good practice. What's your opinion in this topic?

Answer 1

All you gotta do is make the parent of those two div's (the left logo and the right menu items) a display flex and justify-content: space-between or justify-content: space-around like so
.parent-div {
display:flex;
justify-content: space-between; //or space-around
}
.child-left {//doesn't matter what you put in here just so long as its a div}
.child-right {//doesn't matter what you put in here just so long as its a div}
If you have anymore question, this is where I go if I need help figuring out how to use flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

I guess what you need is to move your navigation menu to right, reading the comments.
So solution to this would be giving space to left for your navigation(menu links). Yes you can definitely use margin-left but you do not need to specify exact pixels.
Better would be giving margin-left:auto, so that remaining space would be left on left side of your Navigation
Solution:
header {
background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9);
height: 80px;
}
.menu-section {
display: flex;
}
.nav-logo {
color: #e00986;
font-size: 25px;
margin: 0;
padding-left: 15px;
line-height: 80px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
margin-left:auto; /*ADDED HERE - THIS IS THE TRICK :)*/
}
nav ul li {
display: inline-block;
width: 150px;
position: relative;
}
nav ul li a {
text-decoration: none;
line-height: 80px;
padding: 0 10px;
display: block;
color: #e00986;
}
nav ul li a:hover {
color: #FFF;
transition-duration: 2s;
}
<header>
<nav class="menu-section">
<h1 class="nav-logo">Love &#9825 Cookies</h1>
<ul>
<li>Strona główna</li>
<li>Ciastka
<ul>
<li>Torty</li>
<li>Babeczki</li>
<li>Bezy</li>
<li>Ciasta</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
Hope this helps you.

Answer 3

.nav-logo
{
color: #e00986;
font-size: 25px;
margin-right: 100px;
padding-left: 15px;
line-height: 80px;
}
Use margin for outside spacing:)!