I'm looking for some advice on how to position elements on the page, I'm struggling to understand the best approach to being able to position an element. I'm new to web development and slowly learning but I want to make sure I'm learning the right methods (I'm finding a lot of advice I'm getting isn't necessarily the right approach).
My example is that I have a navbar and I would like to be able to position two elements that are nested within that navbar slightly more to the right. Here is a mockup of my webpage design 
You can see in the navbar the logo and the searchbar are slightly more to the right side of the navbar. I'm trying to figure out how to accomplish this in Bootstrap Studio, the navbar is a standard navbar component which has a navbar-brand nested inside it (along with the navbar-toggle for responsiveness). Just for clarification, I'm using Bootstrap version 3.3.
What would be the best approach to shifting these elements further over to the right whilst maintaining responsiveness? I've found that adding margins doesn't work as responsiveness is pretty much lost when on smaller screen sizes.