При использовании margin в % блок вылазит за контейнер

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  margin: auto;
  border: 1px solid red;
}

.logo {
  border: 1px solid;
}

.list {
  display: flex;
  list-style-type: none;
  border: 1px solid;
}

.list__item+.list__item {
  margin-left: 5%;
}

<div class="logo">logo</div>
<ul class="list">
  <li class="list__item">item1</li>
  <li class="list__item">item2</li>
  <li class="list__item">item3</li>
  <li class="list__item">item4</li>
</ul>