title: How can I use padding right when it is floating right already?
body: <p>I have two images one on the left margin and one on the right margin. I want to center the two elements so they meet in the middle. </p>
  
  <p>But since the box I have on the right is floating right to align to the left one, my padding right doesn't work to push it. </p>
  
  <p><a href="https://i.stack.imgur.com/3yxsR.png" rel="nofollow noreferrer">I want to center these two things</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;section id="content1"&gt;
    &lt;a href="#"&gt;&lt;img src="images/matcha.jpg" alt="pic1" width="300" height="300" /&gt;&lt;/a&gt;
  
    &lt;div class="box1"&gt;
      &lt;div class="heading1"&gt;
        &lt;p&gt;GREEN TEA LOVE&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="paragraph1"&gt;
        &lt;p&gt;Top Impression Bakery Cafe has been on my go-to list for awhile since I saw their 
          Green Tea Croissant on Instagram. If you know me well you would know that I'm a huge 
          fan of anything Matcha and if anything is Matcha related I've got to try it!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#content1{
     padding-top:50px;
     padding-bottom:30px;
     width: 960px;
  }
  
  .box1{
     width:500px;
     height:300px;
     background:-moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
     border-style:solid;
     float:right;
  }
  </code></pre>