As said from others, probably your issue is understanding how gatsby-image is composed, to make it fit in a float involved section. A good starting point is forgetting about floating, and try flexbox grid.
Another good point is: you don't always need gatsby image component, if you need a bg image, you can obtain only the src from the query. Or use gatsby-image without the resizing parameters, and it should adapt to any width of the container you put it in.
As said from others, probably your issue is understanding how gatsby-image is composed, to make it fit in a float involved section. A good starting point is forgetting about floating, and try flexbox grid.
Another good point is: you don't always need gatsby image component, if you need a bg image, you can obtain only the src from the query. Or use gatsby-image without the resizing parameters, and it should adapt to any width of the container you put it in.
I ended up using flexbox instead of floats, and it worked fine.