Bootstrap spacing of links on navbar - html

Question

I'm looking to add a bit of spacing between my username and logout button as well as my login and signup button.
I've tried adding spaces (doesn't do anything) and I've also tried using list items and inserting an empty paragraph tag. What can I do to add two or three horizontal spaces?
<ul class="nav navbar-nav navbar-right">
<div style="margin-right: 10px; margin-left: 15px; margin-top: 15px; margin-bottom: 5px;" class="container-fluid">
{% if session.logged_in %}
Welcome {{session['username']}}
<span class="glyphicon glyphicon-log-out"></span> Logout
{% else %}
<span class="glyphicon glyphicon-log-in"></span> Login
<span class="glyphicon glyphicon-pencil"></span> Sign up
{% endif %}
</div>
</ul>
These items are wrapped in
<div id="navbar" class="collapse navbar-collapse">
along with my other links on the left side.
Here's a picture of what I have now:
Current

Answer 1

To achieve expected result , use below two options
Option1:
Use unordered list tags ul , li
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
Option 2:
Use padding for the anchor tag with the existing code
<div class="row nav navbar-nav navbar-right test">
<span class="glyphicon glyphicon-user"></span> Sign Up<span class="glyphicon glyphicon-log-in"></span> Login
</div>
CSS:
.test a{
padding:10px;
}
For comparison, I have used both options in one codepen, please check it once
https://codepen.io/nagasai/pen/aypdXZ

Answer 2

I think you should apply a display: inline-block; or display: block; to <a></a> elements and then you can set the margins. That should do the work.
Or you can use <div></div> as their parent tag and then apply the margins to them. Just like that:
<div class="sample"><a></a></div>
And CSS:
sample {display:
inline-block;
}