Display inline-grid not working in WordPress pages

Question

I created a working portfolio web page (HTML/CSS) and it displays successfully locally. But when I transfer the code parts to a WordPress page I've prepared, it only displays in a single left-aligned column.

Here is the WordPress page in question: https://erichepperle.com/portfolio/

A screenshot of how the site display is broken

I've been troubleshooting the CSS and if it is specificity issue, I've not found it.

I think it may be related to WordPress adding

tags after every section element. Why is it doing that? I've tried about 5 different suggestions on ways to strip P tags and none of them worked

A screenshot of working section a simple one-page local .htm file

What is preventing proper alignment on my page and how can I fix it?

My Code

 .project { border: solid black 2px; padding: .2em 1em; /* float: left; */ /* display: block; */ overflow: hidden; width: 20vw; background: wheat; border-radius: .6em; min-width: 250px; margin: 0 1em .4em; display: inline-grid; } 

 <div id="wrapper"><header> <h3>Web Design Portfolio:</h3> </header> <div id="content"><section class="project"><img class="aligncenter size-full wp-image-6246" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-hepkatorganics-011.png" alt="" width="198" height="133" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Hepkat Organics" href="https://hepkatorganics.com" target="_blank" rel="noopener">Hepkat Organics</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Created web presence</li> <li>E-commerce</li> <li>Blog</li> </ul> </section><!-- End section --> <section class="project"> <img class="aligncenter wp-image-6243 size-full" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-dsrfarms-011.png" alt="" width="198" height="123" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: DSR Farms" href="http://ehepperle.com/portfolio/dsrfarms/2017-05-01/" target="_blank" rel="noopener">DSR Farms</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="size-full wp-image-6247 aligncenter" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-jjjfarm-011.png" alt="" width="198" height="123" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Triple J Farms" href="http://ehepperle.com/portfolio/jjjfarms/2017-05-02/" target="_blank" rel="noopener">JJJ Farms</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="size-full wp-image-6259 aligncenter" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_eric-hepperle-web-design-portfolio-graywolf-011.png" alt="" width="198" height="123" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS215 Course Final Project: The Gray Wolf Sanctuary" href="http://ehepperle.com/other/assignments/pcc-cas215-final/index.html" target="_blank" rel="noopener">CAS215</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-phttours-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS206 Course Final Project: Portland Historical Tours" href="http://ehepperle.com/other/assignments/pcc-cas206-final/" target="_blank" rel="noopener">CAS206</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-ehw-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Eric L. Hepperle's Personal Website" href="https://erichepperle.com" target="_blank" rel="noopener">Eric L. Hepperle</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-naec-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Native American Entertainment Coalition" href="http://ehepperle.com/portfolio/naec/2017-06-16/" target="_blank" rel="noopener">Native American Entertainment Coalition</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-goodroots-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Good Roots Community Food Bank &amp; Garden" href="http://ehepperle.com/portfolio/goodroots/2017-07-08/" target="_blank" rel="noopener">Good Roots Community Food Bank &amp; Garden</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-handfasting2-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS213 Course Project: Eric &amp; Kat's Handfasting Cermony Website Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-7/week7.html" target="_blank" rel="noopener">CAS213</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-pacmanfaq-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS213 Course Project: Pac-Man FAQ Webpage Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-4/week4.html" target="_blank" rel="noopener">CAS213</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-archangels-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS213 Course Project: Archangels Website Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-3/week3.htm" target="_blank" rel="noopener">CAS213</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-reflections-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS 206 Course Project: Reflections on HTML5 &amp; CSS3 Webpage Design" href="http://ehepperle.com/other/assignments/pcc-cas206-reflection/reflection.html" target="_blank" rel="noopener">CAS206</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> </div> <!-- END #content div --> <footer> <div class="copyright">Copyright © 2018 Eric Hepperle</div> <a href="mailto:ehepp.devmail+portfolio@gmail.com">Eric Hepperle - Webmaster</a> </footer></div> <!-- END #wrapper div --> 

Answer 1

Use flexbox to position your boxes.

Wrap content in some container (in your case it's #container) and give this:

#content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

Works for me now. You can find more information about flexbox here

Answer 2

Actually, all the problems are caused by the images. I wrote css for img and it was fixed. You can make the dimensions of the pictures constant. Like me.

 <html> <style> .project { border: solid black 2px; padding: .2em 1em; /* float: left; */ /* display: block; */ overflow: hidden; width: 20vw; background: wheat; border-radius: .6em; min-width: 250px; margin: 0 1em .4em; display: inline-grid; } img{ height: 100px; width: 200px; } </style> <div id="wrapper"><header> <h3>Web Design Portfolio:</h3> </header> <div id="content"><section class="project"><img class="aligncenter size-full wp-image-6246" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-hepkatorganics-011.png" alt="" width="198" height="133" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Hepkat Organics" href="https://hepkatorganics.com" target="_blank" rel="noopener">Hepkat Organics</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Created web presence</li> <li>E-commerce</li> <li>Blog</li> </ul> </section><!-- End section --> <section class="project"> <img class="aligncenter wp-image-6243 size-full" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-dsrfarms-011.png" alt="" width="198" height="123" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: DSR Farms" href="http://ehepperle.com/portfolio/dsrfarms/2017-05-01/" target="_blank" rel="noopener">DSR Farms</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="size-full wp-image-6247 aligncenter" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_erich-hepperle-web-design-portfolio-jjjfarm-011.png" alt="" width="198" height="123" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Triple J Farms" href="http://ehepperle.com/portfolio/jjjfarms/2017-05-02/" target="_blank" rel="noopener">JJJ Farms</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="size-full wp-image-6259 aligncenter" src="https://erichepperle.com/wp-content/uploads/2018/06/sm_eric-hepperle-web-design-portfolio-graywolf-011.png" alt="" width="198" height="123" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS215 Course Final Project: The Gray Wolf Sanctuary" href="http://ehepperle.com/other/assignments/pcc-cas215-final/index.html" target="_blank" rel="noopener">CAS215</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-phttours-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS206 Course Final Project: Portland Historical Tours" href="http://ehepperle.com/other/assignments/pcc-cas206-final/" target="_blank" rel="noopener">CAS206</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-ehw-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Eric L. Hepperle's Personal Website" href="https://erichepperle.com" target="_blank" rel="noopener">Eric L. Hepperle</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-naec-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Native American Entertainment Coalition" href="http://ehepperle.com/portfolio/naec/2017-06-16/" target="_blank" rel="noopener">Native American Entertainment Coalition</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-goodroots-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle Designs Client: Good Roots Community Food Bank &amp; Garden" href="http://ehepperle.com/portfolio/goodroots/2017-07-08/" target="_blank" rel="noopener">Good Roots Community Food Bank &amp; Garden</a> |</li> <li>2017 |</li> <li>WordPress (self-hosted)</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-handfasting2-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS213 Course Project: Eric &amp; Kat's Handfasting Cermony Website Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-7/week7.html" target="_blank" rel="noopener">CAS213</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-pacmanfaq-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS213 Course Project: Pac-Man FAQ Webpage Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-4/week4.html" target="_blank" rel="noopener">CAS213</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-archangels-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS213 Course Project: Archangels Website Design" href="http://ehepperle.com/other/assignments/pcc-cas213-week-3/week3.htm" target="_blank" rel="noopener">CAS213</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> <section class="project"> <img class="proj-img" src="http://ehepperle.com/other/misc-images/sm_erichepperle-webdesign-portfolio-reflections-1.png" alt="alt goes here" /> <ul class="horz-info"> <li><a title="Eric Hepperle CAS 206 Course Project: Reflections on HTML5 &amp; CSS3 Webpage Design" href="http://ehepperle.com/other/assignments/pcc-cas206-reflection/reflection.html" target="_blank" rel="noopener">CAS206</a> |</li> <li>2016 |</li> <li>Hand-Coded</li> </ul> <h5 class="proj-description">Description:</h5> <ul> <li>Service</li> <li>Service</li> <li>Service</li> </ul> </section><!-- End section --> </html>