The code below has inline styling so you can see it clearly. My problem is as follows:
I create a div 100% wide which on its own works well. It sits at the top of the page. I close the div with ending tag and no problem.
However if I then create a table below that is wider than the display width of a tablet it affects the div above it. This does not happen on my computer. Just tablets and smart phones.
it’s probably because you have a pixel width set for the table and a 100% width for the div. The div is gonna go 100% of the width of the screen which is longer than the defined width of the table (1200px). If you set the table width to something like 70%, that might work for you.
That’s the tricky thing…the 100% div does go the width of the phone/device screen, but the table exceeds the screen. If you want to do a fixed width for the table, you can always do that and then use a media query for when it gets down to mobile sizes and switch it to percentages.
Also, I’m not 100% sure since I haven’t tested, but if you maybe at the viewport meta tag, that might also help as well.