Problems with float in Innovation Cloud


I've been struggling with floating the cloud image in this project. I've tried the fixes people have used in similar questions (resizing the image and making sure that their computer screen isn't zooming in/out), to no avail. I'd really appreciate any assistance with this problem.

The HTML code:
 <div class="main">
      <div class="container">
         <img src="" height="126px;" width="196px;"/> 
        <h2>The Innovation Cloud Conference</h2>

The CSS code:
.main img {
  float: left;
  margin: 50px 80px 50px 0px;

Unfortunately this ends up with the image under the navigation, and the "Innovation Cloud Conference" header and paragraph directly below the image.

Thank you for your help!


A link to the exact exercise will be immensely helpful. Please post a link with your questions. Thanks.


Rather than using .img , why don't you follow the instruction and insert url of image into .header?

.header {
  height: 800px;
  text-align: center; 
  background :url(;


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.