Container offset left in bootstrap 4 - html

Question

I have two bootstrap containers, one inside header navbar of the page, the second below navbar. Inside each container there is some text. I want text that is in the navbar container to be shifted to the left by 15 px for all responsive breakpoints.
I tried to do this using a negative margin. Here is my code:
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container"><div style="margin-left: -15px;">Text1</div></div>
</nav>
<div class="container" style="margin-top: 50px;">Text 2</div>
and JSFiddle example.
This method works, but it has a serious bug. When the width of the browser decreases, text in header navbar starts to go beyond the screen. Is there any way to avoid this? Of course it is clear that I set up margin using #media, but I think this is not quite the right way.

Answer 1

If you use the right way of nesting elements in Bootstrap you will end up with an aligned left side: .row will give you -15px to the left to counter the 15px left padding on .col-xx-xx. What you could do is to add 15px padding to other containers and let the navbar keep the normal bootstrap container max-width... That will keep the default 15px padding on the navbar on mobile/tablet etc.
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container">
<div class="row">
<div class="col-sm-12">Text</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-inner">Text</div>
</div>
</div>
</div>
Codepen Example

Answer 2

You can use navbar-fixed-top instead of fixed-top for navbar section. In Bootstrap 4 adjust margin-left by using default css class ml-1,ml-2,.. and padding pl-1,pl-2 as follows.
Ref Bootstrap 4 spacing
<nav class="navbar navbar-default navbar-fixed-top bg-primary">
<div class="container">
Text 1
</div>
</nav>
<div class="container">
<div class="ml-4 mr-4">
<p>Text 2</p>
</div>
</div>
Try your ans here: https://jsfiddle.net/testdesigner/aq9Laaew/193572/