title: My CSS columns are not going next to each other
body: <p>I have 2 css columns on my website: the right one is 25%, and the left one is 75%. However, right now it doesn't show the right column, the left column takes up 100%, and if I try to put something in the left column it puts it on the bottom of the page. I changed one unrelated thing, I don't even remember what, and now the whole thing isn't working. What do I need to fix?</p>
  <p>my base html:</p>
  <pre><code>&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;
  &lt;script async src=&quot;https://www.googletagmanager.com/gtag/js?id=UA-175481126-1&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'UA-175481126-1');
  &lt;/script&gt;
  
  &lt;style&gt;
  ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Tahoma, Geneva, sans-serif;
  background-color: #333;
  }
  li {
  float: left;
  border-right: 1px solid #bbb;
  }
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  }
  /* Change the link color to #111 (black) on hover */
   li a:hover {
     background-color: #111;
     color: white;
     text-decoration:none;
   }
  
  /* for buttons*/
  .paging {
  background-color: #333;
  border: none;
  color: white;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: Tahoma, Geneva, sans-serif;
  }
  button:hover {
  background-color: #111;
  }
  
  .register {
    float: right;
  }
  
  .paging {
    background-color: #333;
    border: none;
    color: white;
    padding: 8px 14px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
  }
  button:hover {
    background-color: #111;
  }
  
  /* title */
  
  .title {
    color: black;
    padding: 10px;
    text-align: center;
    font-size: 40px;
    font-family: Tahoma, Geneva, sans-serif;
    Color: black;
    text-decoration: none;
  }
  
  /* descriptions */
  
  .description {
    color: black;
    padding: 15px;
    font-family: Tahoma, Geneva, sans-serif;
    text-align: left;
    font-size: 13px;
  }
  
  /* embedd url */
  .iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
      margin-left: auto;   /* Automatic margin from left */ 
      margin-right: auto; /* Automatic margin from right */
  }
  .iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* make columns */
  
  .ads {
    float: right;
    width: 25%;
    padding-right: 3%;
    padding-left: 3%;
    background-color: #E4E9ED;
  }
  
  }
  .videos {
    float: left;
    width: 75%;
    padding-right: 10%;
    padding-left: 10%;
  }
  
  .banner {
    float: left;
    width: 100%;
    height: 5%;
    background-color: red;
    color: white;
    text-align: center;
  }
  
  /* header */
  .header {
    background-color: #F1F1F1;
    text-align: center;
    padding: 20px;
    font-family: Tahoma, Geneva, sans-serif;
  }
  &lt;/style&gt;
  
  &lt;html&gt;
  
  {% load static %}
  &lt;link rel=&quot;shortcut icon&quot; type=&quot;image/png&quot; href=&quot;{% static 'images/favicon.ico' %}&quot;/&gt;
  
  &lt;div class=&quot;header&quot;&gt;
    &lt;a href=&quot;/&quot;&gt;
    &lt;img src=&quot;https://i.ibb.co/5Rqps7F/logo-black.png&quot; alt=&quot;Computer Man&quot;&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;ul&gt;
    &lt;li class=&quot;all&quot;&gt;&lt;a href=&quot;/&quot;&gt;All videos&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;stam&quot;&gt;&lt;a href=&quot;/stam&quot;&gt;Stam videos&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;music&quot;&gt;&lt;a href=&quot;/music&quot;&gt;Music videos&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;news&quot;&gt;&lt;a href=&quot;/news&quot;&gt;News videos&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;contact&quot;&gt;&lt;a href=&quot;/contact&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;register&quot;&gt;&lt;a href=&quot;/register&quot;&gt;Login/Register&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class=&quot;banner&quot;&gt;
      &lt;text align=&quot;center&quot;&gt;We are still developing our site, so we may not be able to update videos as often as we want&lt;/text&gt;
  &lt;/div&gt;
  
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot; crossorigin=&quot;anonymous&quot;&gt;
  
  &lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot; integrity=&quot;sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js&quot; integrity=&quot;sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>my page html:</p>
  <pre><code>{% include 'base.html' %}
  &lt;style&gt;
      .{{ category }} {
          background-color: grey;
      }
  &lt;/style&gt;
  
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;videos&quot;&gt;
      {% autoescape off %}
              &lt;h1 class=&quot;title&quot;&gt; {{ video_.title }} &lt;/h1&gt;
              {% ifnotequal video_.tag 'none' %}
                  &lt;small align = left&gt; {{ video_.tag }} &lt;/small&gt;
              {% endifnotequal %}
              &lt;div class=&quot;iframe-container&quot;&gt;&lt;p align=&quot;center&quot;&gt; {{ video_.url }}&lt;/p&gt;&lt;/div&gt;
              &lt;div class=&quot;description&quot;&gt; {{ video_.description }} &lt;/div&gt;
              &lt;hr/&gt;
  
  {% endautoescape %}
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;ads&quot;&gt;
          {% for ad in ad_item %}
              {% ifequal ad.redirect 'False' %}
                  &lt;img src=&quot;{{ ad.pic }}&quot;&gt;&lt;/img&gt;
              {% endifequal %}
              {% ifnotequal ad.redirect 'False' %}
                  &lt;a href=&quot;{{ ad.redirect }}&quot;&gt;&lt;img src=&quot;{{ ad.pic }}&quot;&gt;&lt;/img&gt;&lt;/a&gt;
              {% endifnotequal %}
          {% endfor %}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>You can see the website at tachlis.herokuapp.com, and you'll see how everythin is one column, and the smiley face picture is all the way on the bottom, instead of being on the right side of the page.</p>
  <p>Note: this is for a django web app, so there might be a few lines that don't make sense.</p>