How do you put spacing between form elements in Bootstrap 4?

How do you put spacing between form elements in Bootstrap 4? In the code below from the official example, the full name has space from '@' while the username does not have spacing. Does anybody know?

<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2 mb-sm-0">
  <div class="input-group-addon">@</div>
  <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2 mb-sm-0">
  <label class="form-check-label">
  <input class="form-check-input" type="checkbox"> Remember me
  </label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>