ul is not occupying the full width - html

Question

Do you know why the list items are not occupying the full width (have some white margin)? And also why the right arrow is not position at right using justify-content: space-between.
Example: http://jsfiddle.net/Lph010v6/
HTML:
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12">
<ul class="MobileCategories">
<li>
<div>
<img src="/img/categories/category1.svg"/>
<span class="MobileCategories__title">Category</span>
</div>
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
</li>
<li>
<div>
<img src="/img/categories/category2.svg"/>
<span class="MobileCategories__title">Category 2</span>
</div>
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
</li>
</ul>
</div>
</div>
</div>
CSS:
.MobileCategories{
margin-top: 10px;
width: 100%;
background-color:green;
li{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000;
background-color: orange;
padding:20px;
img{
width: 30px;
height: 30px;
}
.MobileCategories__title{
margin-left: 15px;
}
}
}

Answer 1

Do you know why the list items are not occupying the full width (have
some white margin)?
The container-fluid has some default padding - reset this to 0 (if so desired)
And also why the right arrow is not position at right using
justify-content-between.
Note that you have an empty a tag inside the li that is preventing the justify-content: space-between.
See demo below:
/*This style from normalize styles of jsfiddle*/
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container-fluid { /*ADDED THIS*/
padding: 0!important;
}
.MobileCategories {
margin-top: 10px;
width: 100%;
background-color: green;
}
.MobileCategories li {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000;
background-color: orange;
padding: 20px;
}
.MobileCategories li img {
width: 30px;
height: 30px;
}
.MobileCategories li .MobileCategories__title {
margin-left: 15px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-12">
<ul class="MobileCategories">
<li>
<div>
<img src="/img/categories/category1.svg" />
<span class="MobileCategories__title">Category</span>
</div>
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
<!-- -->
</li>
<li>
<div>
<img src="/img/categories/category2.svg" />
<span class="MobileCategories__title">Category 2</span>
</div>
<span><i class="fa fa-angle-right" aria-hidden="true"></i></span>
<!-- -->
</li>
</ul>
</div>
</div>
</div>

Answer 2

Your li elements are taking up the full width in your Fiddle. You have padding on your container-fluid element that is adding padding - set this to 0 and it will remove it.
.container-fluid { padding-left:0; padding:right:0; }
The arrow is not being positioned to the right because it is not the right-most element. You have an <a> element after it, and it is getting positioned to the right - you just can't see it because it's empty.
<li>
<div>[...]</div>
<span>[..]</span>
/* this is the element being positioned to the right*/
</li>