title: Align and centre divs
body: <p>I am making a web page. I am trying to centre and align my divs properly (the animated company logos).   </p>
  
  <p>I need them to sit next to each other instead of on top of each other, with spacing in between to fit the page.</p>
  
  <p>This might make things more clear:  </p>
  
  <p><a href="https://i.imgur.com/yfUToFp.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/yfUToFp.png" alt=""></a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/&gt;
          &lt;link rel="stylesheet" type="text/CSS" href="Style.css" /&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header id="container"&gt;
              &lt;h1&gt;
   &lt;a href="a"&gt;My Interactive Webpage &lt;/a&gt;
  &lt;/h1&gt;
                       &lt;h1&gt;
   &lt;a href="a"&gt;Career Page &lt;/a&gt;
  &lt;/h1&gt;
  
  &lt;style&gt; 
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
  }
  
  li {
      float: left;
  }
  
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  li a:hover:not(.active) {
      background-color: #111;
  }
  
  .active {
      background-color: #4CAF50;
  }
  &lt;/style&gt;
  
  &lt;ul&gt;
    &lt;li&gt;&lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="Information Page.html"&gt;Information&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="Game Page.html"&gt;Games&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="Career Page.html"&gt;Career&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;      
          &lt;/header&gt;      
          &lt;div id="container"&gt;     
          &lt;head&gt;
  &lt;center&gt;
  
  &lt;p&gt;&lt;font face="verdana" color="green"&gt;Welcome to my Career Page! 
  I am passionate about all aspects of computer games development especially programming and games design. Since an early age I have played and experienced a wide range of platforms and games and retain my love for this form of entertainment. One of my favourite games of all time is Oblivion, on the PC and developed by Bethesda, it played brilliantly, was graphically superb and had a perfect soundtrack. I would love to be involved in developing a game of that quality for the current generation of platforms as well as PC. A computer games programme that gives me a strong foundation in computer science is ideal. It gives me the fundamental skills and knowledge for adapting to this rapidly changing and evolving games industry.
  Below are some of the companies I would dream of working for.   Please click the text to be taken to the respective homepage of each company. 
  &lt;/font&gt;&lt;/p&gt;
  &lt;/center&gt;                   
             &lt;/div&gt;                  
          &lt;div class="tilt pic"&gt;  
  &lt;style&gt; 
  
  #rcorners3 {
      border-radius: 25px;
      background: url(http://i.imgur.com/AkIPWeF.png);
      background-position: left top;
      background-repeat: repeat;
      padding: 20px; 
      width: 200px;
      height: 150px; 
  }
  &lt;/style&gt;
  
  &lt;a href="http://eu.blizzard.com/en-gb/"&gt;
      &lt;font color="white"&gt;&lt;p id="rcorners3"&gt;BLIZZARD ENTERTAINMENT&lt;/p&gt;&lt;/font&gt;
   &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="tilt pic"&gt;    
          &lt;style&gt; 
  #rcorners2 {   
      border-radius: 25px;
      background: url(http://i.imgur.com/Mouf1lw.png);
      background-position: left top;
      background-repeat: repeat;
      padding: 20px; 
      width: 200px;
      height: 150px;    
  }
  &lt;/style&gt;
  
  &lt;a href="http://www.naughtydog.com/"&gt; &lt;font color="white"&gt;&lt;p id="rcorners2"&gt;NAUGHTY DOG&lt;/p&gt;&lt;/font&gt;
   &lt;/a&gt;
      &lt;/div&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;div class="tilt pic"&gt;    
          &lt;style&gt; 
  #rcorners4 {
      border-radius: 25px;
      background: url(http://i.imgur.com/pFeIHdd.png);
      background-position: left top;
      background-repeat: repeat;
      padding: 20px; 
      width: 200px;
      height: 150px; 
  }
  &lt;/style&gt;
  
  &lt;a href="https://www.ubisoft.com/en-GB/"&gt;
      &lt;font color="white"&gt;&lt;p id="rcorners4"&gt;UBISOFT&lt;/p&gt;&lt;/font&gt;
   &lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
   &lt;/div&gt;      
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;    
      &lt;script src="bootstrap/js/bootstrap.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/body&gt;   
     &lt;/html&gt;
  </code></pre>