Mobile Website HTML Element Too Wide

Site is too wide on mobile

It is caused because of the elements that animate from the right. Look into putting them in another div that wraps these elements. The div will should have 100% width.

As you might notice, as you scroll down, when the elements animate from the right edge of the screen, the right extension disappears.

Mobile website html element too wide

Have you add the viewport meta tag ?

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Why is my header section too wide for mobile?

you are facing this issue as you used em for font-size which makes it have a fixed calculated size for any browser as em is calculated relative to the font-size of the element. So if you want this webpage to be responsive use length measurements such as vw,vh or with %.

Bootstrap4 HTML page is too big on mobile

You should use col-sm-[1 - 12]

Website width too short on Mobile (HTML/CSS)

For mobile devices you should include responsive meta tags to your head, for instance:

<meta name="viewport" content="width=device-width">

But as this link recommends you should use:

<meta name="viewport" content="width=device-width, initial-scale=1">

Also on this famous and very complete github repository you can find out other interesting meta tags perhaps you should include in your project.

By adding this tag to you website you'd see that it still has a right space, that's due the <table>s you're using. You should consider adding a responsive wrapper around those table so that they will be manageable, for instance Bootstrap has a nice .table-responsive wrapper http://getbootstrap.com/css/#tables-responsive

Why is my webpage too wide?

You need a:

* {
  box-sizing: border-box
}

This is essential for responsive designs, as it tells the webpage to including padding and border in the element's total width and height. If you add this, your page displays fine.

This article online here, explains this very well.

Take a look at your webpage here: https://jsfiddle.net/tfr8f8az/

The * targets all elements.