Trying to float image to right of text

When I float the food.png to the right and try and get the text to float around it, it doesn't seem to be working. Any suggestions?

HTML

<div id="main">
        <article>
            <h2>Why Sunflower Seeds?</h2>
                <img src="images/seed.png" alt="seed" class="seed">
                <p class="why">Sunflower seeds are an excellent source of vitamin E, the body's primary fat-soluble antioxidant. Vitamin E travels throughout the body neutralizing free radicals that would otherwise damage fat-containing structures and molecules, such as cell membranes, brain cells, and cholesterol. By protecting these cellular and molecular components, vitamin E has significant anti-inflammatory effects that result in the reduction of symptoms in asthma, osteoarthritis, and rheumatoid arthritis, conditions where free radicals and inflammation play a big role. Vitamin E has also been shown to reduce the risk of colon cancer, help decrease the severity and frequency of hot flashes in women going through menopause, and help reduce the development of diabetic complications.</p><img src="images/food.png" alt="food" class="food">
        </article>
    </div>

CSS

.food {
width: 43%;
float: right;
margin-top: -150px;}

p.why {
margin-right: 15px;
margin-left: 25px;
font-family: century gothic;
line-height: 1.7em;
font-weight: bold;
clear: both;
font-size: 12px;
position: relative;}