Why is the content on this webpage on a mobile device with smaller equal 320px width not 100% wide?

Question

I have the issue that on mobile devices with a screen size less/equal 320px the content is not shown 100% wide which you can see in this image:

I have also uploaded the files here: http://files.ailola.com/tmp/v1/privacy.php

I have been able to figure out the following points:

• When I add a width to the < html > tag, e.g. width=150%, I can somehow fix the issue but it breaks then other areas of the site. I assume that it might be related somehow to this line:
• The issue does not happen when I remove the DIV with ID=container. However editing the styles for the container does not bring me to any solution.
• The issue happens only in Chrome browser (My version is 83.0.4103.97 (Official Build) (64-bit) on Mac OS 10.15.4) and iOS (My version is 13.3.1 on iPhone 6s). However in Firefox I cannot reproduce the issue. Maybe it is just Apple-related.

Removing the linked stylesheet does not solve the issue neither.

I just do not figure out the reason. Do you have an idea? Thanks so much for your help.

Answer 1

There are multiple paragraphs on your page which are overflowing container due to default word wrapping strategy.

To fix the issue apply either word-break or overflow-wrap style to your paragraph:

p {
   ...,
   word-break: break-all;
}

or

p {
   ...,
   overflow-wrap: break-word;
}