How Do I Remove Bullets From Shortcode List

I am creating pages of my Posts using shortcode
[display-posts posts_per_page="100" category_id="72"]

I want to replace the round default bullet with my own image.

In my custom CSS I have:

/* Remove bullet points and "standarize" list*/ 
.my-list { 
	list-style:none;
	display:block;
	width:auto;
	overflow:hidden;}  

/* add images instead of bullet points */ 
.my-list li { 	
  	background: url('https://christiangays.com/mary-content/uploads/sites/8/2018/03/CG-bullet.gif') center left no-repeat;
  	padding-left: 25px !important;  }

On my page I would normally put

<ul class="my-list">
 	<li>item 1</li>
 	<li>item 2</li>
 	<li>item 3</li>
</ul>

but I can't do that with shortcode so it is showing the default bullet with my image bullet beside it.

How do I get rid of the default bullet please.