Hello!
I am trying to design a page with a picture floating to the left. I am ok with HTML and have been successful in getting the image to float where I want. However, I am stuck in moving the text to the right because my bullet points are overlapping the image. Here is a picture:
Here is the HTML code:
<p>Based on clues from the story tell what book you are reading and make a prediction about what will happen next...</p>
<p><span style="font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18pt; color: var(--ic-brand-font-color-dark);"><img style="float: left;" src="https://images.unsplash.com/photo-1493612276216-ee3925520721?crop=entropy&cs=tinysrgb&fit=ma..." alt="Thinking Stems" width="175" height="193" data-api-endpoint="https://holmen.instructure.com/api/v1/courses/21101/files/940139" data-api-returntype="File" /></span></p>
<ul>
<li>I think __________ will happen because...</li>
<li>I can predict that...because...</li>
<li>Next, I think the characters will...</li>
<li>Since __________ happened, I think...</li>
</ul>
<p> </p>
