HTML email displays as too wide in gmail, when it is only 580px wide.

My html email is 580px wide, and the bottom sections divides into 2 columns 290px wide.  Looks great in portrait view as I add things in one by one.  The email fills the screen in gmail.  But, when I add in the paragraphs in green to the first column, then the email appears wider than the screen.  Everything seems solid in my code, what am I overlooking?  

Codepen:  https://codepen.io/emilysbca/pen/LmeaJW/
emilysbcaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
It could be that you are using HTML or CSS that Gmail blocks.  How are you viewing your Gmail?  Desktop?  Mobile?  Which browsers?
emilysbcaAuthor Commented:
Dave Baldwin I paste the code into mailChimp and send it to my gmail account.  I look at it on my android phone.  Looks fine on my laptop.  Yahoo never has a problem, that's another account that I send to through mailChimp.
Dave BaldwinFixer of ProblemsCommented:
All web mail services limit the HTML and CSS that is allowed and each is different.  They block things that might break their site when your email is displayed.  This page https://www.campaignmonitor.com/css/ shows some of the differences between email clients.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

emilysbcaAuthor Commented:
I saw that style tags in the body are not supported in gmail, so I moved every style up to the header.  I even took out every image.  STILL gmail is messing with me.  I changed my pen to reflect my changes:  https://codepen.io/emilysbca/pen/qYxYJx/
Dave BaldwinFixer of ProblemsCommented:
I would make a copy and strip out all comments And the CSS.  Especially get rid of the 'if' statements at the top and bottom.  Modern versions of IE will ignore those anyway.  Get it to the simplest possible page and build it up.
emilysbcaAuthor Commented:
This version is 500px wide.  It too, is too wide for portrait view through gmail.  I am stumped.

https://codepen.io/emilysbca/pen/MGQZPe/
Dave BaldwinFixer of ProblemsCommented:
I just realized what you are talking about.  In order to view pages on a phone, we make them 'responsive' instead of fixed.  The usually means sizing elements with percentages and not pixels.  Leave the max-width but change the width to 100%.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
emilysbcaAuthor Commented:
Yes, thank you Dave Baldwin, and it makes total sense.  Changing width from fixed to 100% makes it fit the screen, but it will never be wider than the max-width of 580px.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Email Clients

From novice to tech pro — start learning today.