title: Placing Images and Div Elements Next to Each Other?
body: <p>Working on a page for my website and I'm trying to set up a series of profiles side-by-side. 
  <a href="https://i.stack.imgur.com/NtBEh.png" rel="nofollow noreferrer">The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side.</a>
  I'm fairly uncertain of how to do this, ass I thought fixing the padding and adding inline to the blocks themselves would stack them side by side. Help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Head, .Welcome {
      padding-left: 300px;
   margin-right: 150px;
  }
  
  .body {
      padding-left: 300px;
   margin-right: 150px;
  }
  
  .img.center {
   display: block;
   margin: 0 auto;
  }
  
  ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   width: 200px;
   background-color: #d9d9d9;
   height: 100%;
   position: fixed;
   display: inline-block;
  }
  
  li {
   text-align: center;
   border-bottom: 1px solid #555;
  }
  
  #pagename {
   text-align: center;
   font-family: "Arial"
  }
  
  li a {
   display: block;
   color: #000;
   padding: 8px 16px;
   text-decoration: none;
   font-family: "Arial"
  }
  
  .active {
   background-color: #990000;
   color: white;
  }
  
  li a:hover {
   background-color: #990000
   color: white;
  }
  
  #titletext {
   text-align: center;
   font-family: "Arial";
   font-size: 50;
  }
  
  /*GAR PROFILE*/
  
  .Gar{
   padding-left: 300px;
  }
  
  .gar-block1{
   background-color: #990000;
   color: white;
   font-family: "Arial";
   text-decoration: none;
   text-align: center;
   width: 250px;
   padding: 20px;
  }
  
  .gar-block2{
   background-color: #d9d9d9;
   color: black;
   font-family:"Arial";
   text-decoration: none;
   width: 250px;
   height: 300px;
   padding: 20px;
  }
  
  /*MAYU PROFILE*/
  
  .Mayu{
   padding-left: 750px;
   display: in-line;
  }
  
  .mayu-block1{
   background-color: #990000;
   color: white;
   font-family: "Arial";
   text-decoration: none;
   text-align: center;
   width: 250px;
   padding: 20px;
   display: in-line;
  }
  
  .mayu-block2{
   background-color: #d9d9d9;
   color: black;
   font-family:"Arial";
   text-decoration: none;
   width: 250px;
   height: 300px;
   padding: 20px;
   display: in-line;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
   &lt;html&gt;
  &lt;!--HEAD INFORMATION--&gt;
   &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css"&gt;
    &lt;title&gt;FFXIV RP Database&lt;/title&gt;
    &lt;style&gt;
     div.head {
      background-color: #000000;
      color: white;
      text-decoration: none;
      margin: 5px 0 5px 0;
      padding: 20px;
     }
    &lt;/style&gt;
   &lt;/head&gt;
  &lt;!--END: HEAD INFORMATION--&gt;
   
   &lt;body&gt;
  &lt;!--NAVIGATION BAR--&gt;
    &lt;div class="Navigation"&gt;
     &lt;ul&gt;
      &lt;li id="first"&gt;&lt;img src="xiv logo.png" width="200px"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="characters.html" class="active"&gt;Characters&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="story.html"&gt;Story&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="stats.html"&gt;Stats&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=".html"&gt;Contact&lt;/a&gt;&lt;li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
  &lt;!--END: NAVIGATION BAR--&gt;
  
  &lt;!--HEADER--&gt;
    &lt;div class="head"&gt;
     &lt;h1 id="titletext"&gt;FFXIV RP Database&lt;/h1&gt;
    &lt;/div&gt;
  &lt;!--END: HEADER--&gt; 
  
  &lt;!--BELOW HEAD CONTENT--&gt;
    &lt;div class="Characters"&gt;
     &lt;p&gt;
      &lt;h2 id="pagename"&gt;Characters&lt;/h2&gt;
      &lt;p&gt;
    &lt;/div&gt;
   
  &lt;!--CHARACTER PROFILE: GAR--&gt;
   &lt;div class="Gar"&gt;
    &lt;p&gt;
     &lt;a href="https://charahub.com/character/1024524/Gar"&gt;&lt;img id="garprofile" src="Gar.png" height="290px"&gt;&lt;/a&gt;
      &lt;div class="gar-block1"&gt;&lt;h3&gt;"Gar"&lt;/h3&gt;&lt;/div&gt;
      &lt;div class="gar-block2"&gt;
       &lt;p&gt;&lt;b&gt;Age:&lt;/b&gt; 30&lt;/p&gt;
       &lt;p&gt;&lt;b&gt;Height:&lt;/b&gt; 5'11"&lt;/p&gt; 
       &lt;p&gt;&lt;b&gt;Job:&lt;/b&gt; Dark Knight&lt;/p&gt;
       &lt;p&gt;&lt;b&gt;Role:&lt;/b&gt; Tank&lt;/p&gt; 
       &lt;p&gt;&lt;b&gt;Family:&lt;/b&gt; Unknown mother and father (estranged)&lt;/p&gt; 
       &lt;p&gt;&lt;b&gt;Significant Other:&lt;/b&gt; Mayumi Mori&lt;/p&gt; 
   &lt;/p&gt;
  &lt;!--CHARACTER PROFILE: MAYU--&gt;
   &lt;div class="Mayu"&gt;
    &lt;p&gt;
    &lt;aside&gt;
     &lt;a href="https://charahub.com/character/1024524/Gar"&gt;&lt;img id="garprofile" src="Mayumi.png" height="290px"&gt;&lt;/a&gt;
      &lt;div class="mayu-block1"&gt;&lt;h3&gt;Mayumi Mori&lt;/h3&gt;&lt;/div&gt;
      &lt;div class="mayu-block2"&gt;
       &lt;p&gt;&lt;b&gt;Age:&lt;/b&gt; 23&lt;/p&gt;
       &lt;p&gt;&lt;b&gt;Height:&lt;/b&gt; 4'8"&lt;/p&gt; 
       &lt;p&gt;&lt;b&gt;Job:&lt;/b&gt; Astrologian&lt;/p&gt;
       &lt;p&gt;&lt;b&gt;Role:&lt;/b&gt; Healer&lt;/p&gt; 
       &lt;p&gt;&lt;b&gt;Family:&lt;/b&gt; Junko Mori (Dead) and Khaguran (Unknown)&lt;/p&gt; 
       &lt;p&gt;&lt;b&gt;Significant Other:&lt;/b&gt; Gar&lt;/p&gt; 
    &lt;/aside&gt;
    &lt;/p&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>