Ordered lists shifted to the left when altering the display property

// If checked, set display to 'initial' otherwise set it to 'none'.

function check(event) {
  let ol = document.getElementById('list');
  if (event.currentTarget.checked) {
    ol.style.display = 'initial';
  } else {
    ol.style.display = 'none';
  }
}

show.addEventListener('click', check, false);
ol    {display: none;}
label {user-select: none;}
<input id="show" type="checkbox" />
<label for="show">Show list</label>

<ol id="list">
  <li>list</li>
</ol>

The list is shifted to the left as seen, there is some part of that sticking out. Why does this happen? How to stop it? I packed the list up in a flex container but they appear to be shifted to the right:

function check(event) {
  let ol = document.getElementById('list');
  if (event.currentTarget.checked) {
    ol.style.display = 'initial';
  } else {
    ol.style.display = 'none';
  }
}

show.addEventListener('click', check, false);
ol {
  display: none;
}

label {
  user-select: none;
}

div {
  display: flex;
  justify-content: left;
}
<input id="show" type="checkbox" />
<label for="show">Show List 1</label>

<div>
  <ol id="list">
    <li>list 1</li>
  </ol>
</div>

Thanks!

Answer

Try this css:

ol    {display: none;
list-style-type: none;}
label {user-select: none;}
input {padding: 0; margin: 0;}

The input has some padding and margin. I have removed it. Also, removed the styling from list using list-style-type. Codepen