title: How to get my twitter feed next to my video on the same line
body: <p>I am trying to get my live twitter feed to be right next to my youtube video and I want them to be on the same line but don't know what code to implement so that this works. </p>
  
  <p>Also I want to use another font family to the one I have used in my code, where can I find them and how do I implement it into my code? </p>
  
  <p>Below I have provided the html, css and js for my webpage, if you can please fix the errors thanks. </p>
  
  <h3>HTML:</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Muhammed's Webpage&lt;/title&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="homepage.css"&gt;
    &lt;script src="homepage.js"&gt;&lt;/script&gt;
  
    &lt;link href='https://fonts.googleapis.com/css?family=Raleway:700|Arya:400,700|Nunito:700' rel='stylesheet' type='text/css'&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;&lt;img src="https://www.facebookbrand.com/img/fb-art.jpg" height=85px&gt;
  
    &lt;div id="page"&gt;
  
      &lt;div id="navbar"&gt;
        &lt;ul&gt;
  
          &lt;li&gt;&lt;a href="#BasicInfo"&gt; BASIC INFORMATION &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Curriculum Vitae"&gt; CURRICULUM VITAE &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Portfolio"&gt; PORTFOLIO &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Report"&gt; REPORT &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="yt"&gt;
        &lt;iframe height="400" width="700" src="http://www.youtube.com/embed/nKIu9yen5nc"&gt;
        &lt;/iframe&gt;
      &lt;/div&gt;
  
    &lt;div id = "twitter"&gt;
      &lt;a class="twitter-timeline" href="https://twitter.com/applenws" data-widget-id="674678491141570560"&gt;Tweets by @applenws&lt;/a&gt;
    &lt;/div&gt;
  
      &lt;div class="content" id="Basic Information"&gt;
        &lt;h3 class="contentbox"&gt; &lt;u&gt;Basic Information&lt;/u&gt; &lt;/h3&gt;
        &lt;p&gt;In this section i will have some information about myself.
          &lt;br&gt; For my finished website i'd like to make it responsive, so that it alters and readjusts well to different screen sizes. I'd also like to include a gallery that uses javascript as i haven't used any javascript on this site yet.
          &lt;br&gt;
          &lt;br&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  
        &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="content" id="Curriculum Vitae"&gt;
        &lt;h3 class="contentbox"&gt; &lt;u&gt;Curriculum Vitae&lt;/u&gt; &lt;/h3&gt;
        &lt;p&gt;
          Here i will have my twitter, instagram and facebook feed
          &lt;br&gt; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo
      &lt;/div&gt;
  
      &lt;div class="content" id="Portfolio"&gt;
        &lt;h3 class="contentbox"&gt; &lt;u&gt;Portfolio&lt;/u&gt; &lt;/h3&gt;
        &lt;p&gt;
          Here i will showcase some of my current projects and completed projects.
          &lt;br&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem. Nulla consequat massa quis enim.
        &lt;/p&gt;
      &lt;/div&gt;
  
  
      &lt;div class="content" id="Report"&gt;
        &lt;h3 class="contentbox"&gt; &lt;u&gt;Report&lt;/u&gt; &lt;/h3&gt;
        &lt;p&gt;
          Here i will showcase some of my current projects and completed projects.
          &lt;br&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
          quis, sem. Nulla consequat
  
      &lt;/div&gt;
  
      &lt;br&gt;
      &lt;br&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h3>CSS:</h3>
  
  <pre><code>#page {
      margin: auto;
      max-width: 85%; 
      font-family: 'Arya', sans-serif;
      color: white;
      padding-top: 50px;
  }
  
  #navbar {
      position: fixed; 
      top: 0;  
      width: 100%;
      margin-left: 11%;
      opacity: 0.8;
      max-width: 85%;
  
  }
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: white;
      position: fixed;
  }
  li {
      float: left;
      border-right: 2px solid black;
  }
  
  li:first-child {
      border-left: 2px solid black;
  }
  li a {
      display: inline-block;
      color: black;
      text-align: justify;
      padding: 36px 40px; 
      text-decoration: underline; 
      font-family: 'Raleway', sans-serif;
  }
  li a:hover {
      background-color: #5c5c5c;
      color: white; 
  }
  
  div.yt {
    margin-left: 0px;
    margin-top: 0px;
  } 
  
  #twitter {}
  
  .contentbox {
      font-family: 'Arya', sans-serif;
      font-weight: 700;
      font-size: 2em;
      padding-left: 10px;
      padding-bottom: 0;
      margin-bottom: 0;
      background-color:  grey;
  }
  .content {
      background-color: grey;
  }
  p {
      text-indent: 3%; 
      margin: auto;
      max-width: 95%;
  }
  h3 {
      margin-left: 5px;
      max-width: 95%;
  }
  </code></pre>
  
  <h3>JS:</h3>
  
  <pre><code>!function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+"://platform.twitter.com/widgets.js";
          fjs.parentNode.insertBefore(js,fjs);
      }
  }(document,"script","twitter-wjs");
  </code></pre>