It is unclear what you mean by "square with the left hand side", do you mean:
a. The left hand side of Harlowe's tw-passage element which is where the HTML elements generated from the contents of the current Passage are situated.
b. The left hand side of the web-browser's view-port (screen/page).
c. Some other left hand side...
There are a couple of HTML elements that make up the view-able page that are adding some sort of space on the left side of the view-port, these (may) include:
a. The figure element you wrapped your img element in, which can have a default left/start/before margin depending on your web-browser of choice's default CSS.
b. Harlowe's tw-story element (which contains the tw-passage element) has a default left margin of 20% of the current width of the web-browser's view-port.
c. Any other elements or their related CSS that you have in your story that you didn't include in your above example...
My best guess is that it is point A that is causing your issue, you can fix that by either removing the figure element from your passage or by placing CSS like either of the following two examples in your story's Story Stylesheet area:
a. To remove only the default left/start/before margin from the figure element:
b. To remove all four default margins (top,right,bottom,left) from the figure element:
1. The style attribute of your img element is missing a trailing quotation mark.
2. I would also suggest moving the styling from the img element itself into the Story Stylesheet area and using either a CSS class or an element ID to apply it you your image.
a. HTML in your Passage.
<!-- CSS class based styling. -->
<img src="images/lens formula.jpg" alt="lens formula" class="formula">
<!-- Element ID based styling. -->
<img src="images/lens formula.jpg" alt="lens formula" id="lens-formula">
b. CSS to style the above two examples.
/* CSS class based styling. */
/* Element ID based styling. */