Positioning horizontal menu using flexbox - html

Question

I am trying to do fixed menu using flexbox. In my navigation bar I created 2 divs. First should contain logo, and second menu(with display:flex property). I've got problem, when I want to postion the li element of my menu. I want horizontal menu, but when I add justify-content:space-between my first element should be situated in left edge of menu's div but it has a small margin and I don't know why.
https://jsfiddle.net/4Lmu08yc/
header {
height:100vh;
background-color:yellow;
width:100vw;
max-width:100%;
}
.navbar {
width:100vw;
background-color:grey;
height:7vh;
max-width:100%;
position:fixed;
border-bottom:5px solid white;
z-index:2;
}
.flex_row {
display:flex;
flex-direction:row;
}
.container{
height:100%;
width:100vw;
max-width:100%;
background-color:green;
display:flex;
}
#logo {
height:100%;
background-color:white;
flex-grow:1;
}
#menu {
height:100%;
background-color:yellow;
flex-grow:1;
}
#menu ul {
list-style-type:none;
justify-content:flex-start;
align-content:flex-end;
}
#menu ul li {
border:1px solid black;
line-height:40px;
}
<header>
<div class="container">
<div class="navbar flex_row">
<div id ="logo"></div>
<div id ="menu">
<ul class="flex_row">
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
</ul>
</div>
</div>
</div>
</header>

Answer 1

You have to add margin:0; to '#menu ul'.
HTML automatically adds a margin to unorderded lists.
#menu ul {
margin:0;
}