html - Positioning horizontal menu using flexbox -

i trying fixed menu using flexbox. in navigation bar created 2 divs. first should contain logo, , second menu(with display:flex property). i've got problem, when want postion li element of menu. want horizontal menu, when add justify-content:space-between first element should situated in left edge of menu's div has small margin , 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><a href="#">text1</a></li>              <li><a href="#">text2</a></li>              <li><a href="#">text3</a></li>              <li><a href="#">text4</a></li>          </ul>      </div>  </div>  </div>  </header>

you have add margin:0; '#menu ul'.

html automatically adds margin unorderded lists.

#menu ul {       margin:0; }