How to remove space from container

I have a container on my landing page and it makes white space. I want it full screen. I try to make the top and right 0px, but the right still edge. This is what looks like

And this is what I want

The code

<section class="zerra-porto">
      <div class="container">
        <div class="row">
          <div class="col align-self-center">
            <h1 class="mb-4">
              Hi, My Name is <br />
              Sumnit Parfit
            </h1>
            <p>A Front End Developer</p>
            <a href="#" role="button" class="btn btn-primary">Get to know</a>
          </div>
          <div class="col">
            <img src="/images/foto.png" alt="" class="landing-pic" />
          </div>
        </div>
      </div>
    </section>





 

.zerra-porto .landing-pic {
 position: relative;
 right: 0px;
 top: 0px;
 z-index: -1;
}