title: Horizontal alignment of 3 boxes of div
body: <p>I'm create html page called AboutUs.html. I was tasked to complete the page but there is a problem. I want to align the three box in horizontally something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/ZHtZU.jpg" alt="correct output"></p>
  
  <p>but I try using some CSS code but still could not align in horizontal. </p>
  
  <p>Wrong Output:</p>
  
  <p><img src="https://i.stack.imgur.com/0QMyK.jpg" alt="click here"></p>
  
  <p>I want the first box to be left, for second box to be center and the third box to be right. Can anyone please help me fix this problem. </p>
  
  <p>This is About.html code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Two Trees Creative - About Us &lt;/title&gt; 
  
       &lt;link rel="stylesheet" href="_stylesheets/Css_Reset.css"/&gt;
  
      &lt;link rel="stylesheet" href="_stylesheets/mystyle.css"/&gt;
  &lt;/head&gt;
      &lt;body&gt;
  &lt;div id="wrapper"&gt;
      &lt;header&gt;
          &lt;a id="logo" href="#"&gt;Two Tree Creative&lt;/a&gt;
          &lt;nav id="mainNav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="About.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
      &lt;/header&gt;
          &lt;section id="welcome"&gt;
  
              &lt;h1&gt;Designing your world&lt;/h1&gt;
              &lt;p&gt;One pixel at a time&lt;/p&gt;
          &lt;/section&gt;
  
          &lt;section id="about"&gt;
              &lt;h2&gt;About us&lt;/h2&gt;
              &lt;article id="about_info"&gt;
              &lt;p&gt;Two Trees Creative is a full-service graphic design agency based in Ventura, CA. Our goal is to provide elegant work and unsurpassed customer service to our clients in every way.&lt;/p&gt;
              &lt;h3&gt;Meet Our Team of Creatives&lt;/h3&gt;
              &lt;p&gt;Collectively we have over 15 years experience in the graphic design industry, and our services include brand identity development, business cards, brochures, flyers, catalogs, and more. Thank you for considering us for your next project, and we hope to hear from you soon.&lt;/p&gt;
              &lt;/article&gt;
  
          &lt;aside id="about_team"&gt;
            &lt;div class="row"&gt;
            &lt;div class="image"&gt;
              &lt;img src="_images/team/alex_morrales.jpg" alt="Alex Morrales" width="150" height="150"&gt;
                &lt;p&gt;Alex Morrales&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class="image"&gt;
              &lt;img src="_images/team/david_kim.jpg" alt="David Kim" width="150" height="150"&gt;
                &lt;p&gt;David Kim&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div class="image"&gt;
              &lt;img src="_images/team/jenny_tabers.jpg" alt="Jenny Tabers" width="150" height="150"&gt;
                &lt;p&gt;Jenny&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;&lt;/div&gt;
          &lt;/aside&gt;
  
          &lt;/section&gt;
  
  
  
  
  
      &lt;footer&gt;
          &lt;p&gt;Photoshop adapted from www.lynda.com - Photoshop CC for Web Designed by Justin Seeley&lt;/p&gt;
      &lt;/footer&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>For mystyle.css code, under about_team <strong>id element</strong> i need to code something in order for the 3 box to be align in horizontally.</p>
  
  <pre><code>#wrapper {
      max-width: 1280px;
      margin: auto;
  
  }
  
  /*header*/
  header {
      background-color: white;
      width:100%;
      height: 165px;
      text-align: center;
      margin-top: 60px;
  }
  
  #logo {
      background: url(../_images/ttc_logo.png) no-repeat;
      width: 85px;
      height: 85px;
      margin: auto;
      margin-bottom: 0px;
      display: block;
      text-indent: -9999px;
  }
  
  #welcome 
  {
      background: url(../_images/banner.jpg);
      width:100%;
      height:650px;
      overflow:hidden;
      text-align:center;
      color:white;
      vertical-align:middle;
  
  }
  
  
  #welcome h1
  {
      font-size:4em;
      font-family:'Adobe Garamond , serif';
      padding-top:200px;
      text-transform:uppercase;
  }
  #welcome p
  {
      font-size:3em;
      font-family:'Adobe Garamond , serif';
      font-style:italic;
      font-weight:bold;
  
  }
  
  #about
  {
      margin:auto;
      height:550px;
      background-image:url(../_images/tree1.gif), url(../_images/tree1.gif);
      background-position:-150px, 115%;
      background-repeat:no-repeat, no-repeat;
  }
  
  #about h2
  {
      text-align:center;
      text-transform: uppercase;
      font: 3em 'Adobe Garamond, serif';
      font-weight:bold;
      padding-top:50px;
      margin-bottom:25px;
      color:rgb(82, 71,65);
  }
  
  #about h3
  {
      font:36px Arial, sans-serif;
      margin-top:60px;
      margin-bottom:10px;
      color:rgb(134,118,92);
  }
  
  #about_info{
      float:left;
      margin: 0 auto;
      padding-top:37px;
      width:40%;
      height:400px;
      padding-left:125px;
  }
  
  #about_team
  {
      float:left;
      margin: auto;
      height:400px;
      padding-top:37px;
      padding-left:20px;
  }
  
  
  
  
  #mainNav{
      width: 680px;
      margin: auto;
  }
  
  #mainNav ul li {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: inline;
  }
  #mainNav li a:link{
      text-align: center;
      display: block;
      float: left;
      width: 110px;
      text-decoration: none;
      text-transform: uppercase;
      color: #5b866b;
      margin: 20px 20px;
      height: 20px;
      padding: 5px;
      border-radius: 5px;
  }
  #mainNav ul li a:hover,
  #mainNav ul li a:focus
  
  {
      background: rgb(185,140,72);
      color: white;
      box-shadow: 2px 3px 4px 0px #CC9933;
  }
  
  footer{
      background-color: #dee7e1;
      text-align:center;
      height:20px
      padding:20px;
      clear:both;
  
  }
  </code></pre>