black border on right of background image and profile image off center
<p>New to front end development. I have been trying to fix this bug through trial and error to no avail. when I inspect my page everything looks fine. when I test out my page on my Mobil phone I see this black bar to the right of my background image and my profile pic becomes off center. "cover-image;" is grayed out for "background-size" - </p>

<p><strong>here is my html code:</strong></p>

<pre><code>&lt;div class="container-fluid"&gt;
&lt;div class="cover-image"&gt;
&lt;div class="quote"&gt;
"Prepare Today For The Wants of Tomorow." &lt;br&gt;- &lt;span style="font-size:      .65em;"&gt;Aesop&lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class="container-fluid"&gt;
 &lt;div id="about" class="row"&gt;
 &lt;div id="profile-pic" class="col-md-5 col-md-push-1 col-xs-8 rounded-img text-center"&gt;
 &lt;div id="text-content"&gt;Circuit de Catalunya Montmelo&lt;br&gt;Barcelona, Spain&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="about-content" class="col-md-7 col-md-push-2 col-xs-12"&gt;
</code></pre>

<p>My CSS code:</p>

<pre><code>    .cover-image {
    position: relative;
    z-index: 1;
    background: #D3D3D3 url("../images/surfers.jpeg");
    background-position:center;;
    background-size: cover-image;
    background-repeat: no-repeat;
    width: 105%;
    height: 500px;
    overflow: hidden;
    padding: 0;
    opacity: 0.9;
    }
</code></pre>

<p><img src="https://i.stack.imgur.com/1ziGr.jpg" alt="portfolio website"></p>