White Space Showing Up on Right Side of Page When Background Image Should Extend Full Length of Page

Unwanted white space on right side in mobile view

I think there might be one element on your page which might have a width and a padding or margin exceeding 100%.
When 'inspecting' the page and hover over the white space you might select an element there which is going outside of the wanted page.

Try and find this using the inspect element and change this in CSS with using media queries

Entire website has white margin on its right side in Mobile view

Your viewport is scaled when you resize browser window, so adding user-scalable=0 will solve that problem. (at present when you press ctrl+0 it solves the issue)

Replace your viewport with this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">

White space at the right of my webite on Angular

two issues:
First is defining <i> element to have 600px instead of having 100%:
https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L274

the other one is simply adding overflow-x: hidden here:
https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L32

A good approach to find these overflowing elements, is using chrome developer tools to shrink the page width until that horizontal scroll shows.

then start removing elements from the dom by clicking them and hitting the DELETE key. the moment you see the horizontal scroll disappears, you CTRL+Z and drill down to its child elements where you do the same process untill you find the nasty element. then inspect its CSS props to find out why it does what it does.

Background image not covering entire page?

I cleaned up your markup a little bit (try not to use inline styles when possible) and think I achieved the effect you are looking for.

#front {  background: url("https://image.ibb.co/mjTmwv/port34.png") no-repeat;  overflow: hidden;  background-size: cover;  width: 100%;  min-height: 100vh;}
.text-center {  text-align: center;}
h1 {  color: white;  font-size: 50px;  margin-top: 40vh;  padding: 10px;  background: rgba(43, 142, 255, 0.4);}
h2 {  color: white;  font-size: 30px;  background: rgba(39, 220, 130, 0.4);}
ul {  list-style-type: none;  margin: 0;  padding: 0;  overflow: hidden;  background-color: rgba(0, 0, 0, 0.7);  position: fixed;  top: 0;  width: 100%;  font-size: 16px;  z-index: 9;}
li {  float: left;}
li a {  display: block;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}
li a:hover:not(.active) {  color: white;  background-color: rgba(39, 220, 130, 0.4);  transition: 0.5s;  text-decoration: none;}
.active {  color: white;  background-color: rgba(43, 142, 255, 0.4);}
.active:hover {  color: white;  text-decoration: none;}
.active img {  width:auto;  height:auto;  max-height:26px;  max-width:20px;}

<ul>  <li><a class="active" href="#"><img class="img-fluid" src="https://image.ibb.co/mg1s3a/lyreimage27.png" alt="website icon" />placeholder inc.</a></li>  <li><a href="#">About</a></li>  <li><a href="#">Portfolio</a></li>  <li><a href="#">Contact</a>  </li></ul>
<header id="front">  <div>    <div class="container-fluid text-center">      <h1>Placeholder</h1>      <h2>Placeholder Text</h2>     </div>  </div></header>

White Blanks to the Right in Mobile View of Website

If you take a look at the image I posted below, you can see that the div with the id image-top-div is pushing everything over. You will need to resize the image and play with the margin and padding. You can see me here in the gif taking out the margin-left which solves it. Sample Image

Website screenshot

Website body background rendering a right white margin in iPhone Safari

Moving the styling to the html element works fine, but there are other ways of fixing this.

What's going on here is initially the body element is sized according to the viewport. If the viewport is only X pixels wide, your body will only be X pixels wide, even if the contained content is wider. To fix this, give your body (or whatever you're attaching the background stylings to) a non-percentage based width or a min-width to fit your content.

You actually get the same issue on desktop browsers by narrowing the browser window and scrolling to right. The problem is more noticeable on the iPhone/iPad because by default, Mobile Safari will set the viewport to 980px, and then zoom out until all your content fits on screen.

An alternate solution, which I wouldn't recommend because it only works for Mobile Safari is setting the viewport width yourself using:

<meta name = "viewport" content = "width = 1080">

More info at Apple's Developer Docs.