u/Fun-Spare8427 — reddlx

https://preview.redd.it/tmpwsbxyknxg1.png?width=840&format=png&auto=webp&s=8d701605aaea9f8a7f651a0d1f7e6112d15b4d1e

I am using a three column div, which encompasses one normal div, a two column div, and another single column div containing an img. I'm wondering why the img is so close to the center as if it is in a two column div. this is forcing the center two column div to be crushed. the first single div is in the correct spot. the img and its container both float right.

HTML:

&lt;!DOCTYPE html&gt;
&lt;html lang="en-US"&gt;
    
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;YouTube&lt;/title&gt;
    &lt;link rel="stylesheet" href="Youtube.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!--takes up 30%of the screen (horz)--&gt;
      &lt;div class="three_column" style="height:30%;"&gt;
          &lt;div style="float: left;"&gt;
              &lt;a href="www.youtube.com"&gt;&lt;img src="YTlogo(dark).png" alt="YouTube" style="width:100%; margin-left:5%; margin-right:5%"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="two_column"&gt;
              &lt;div class="clock"&gt;
                  &lt;p&gt;time&lt;/p&gt;
                  &lt;span id="hrs"&gt;00&lt;/span&gt;
                  &lt;span&gt;:&lt;/span&gt;
                  &lt;span id="min"&gt;00&lt;/span&gt;
                  &lt;span id="hem"&gt;am&lt;/span&gt;
              &lt;/div&gt;
              &lt;script&gt;
                    document.addEventListener('DOMLoaded', function() {
                        console.log("DOM Loaded");
                    });

                    let currentTime = new Date();

                    let hrs = document.getElementById("hrs");
                    let min = document.getElementById("min");
                    let hem = document.getElementById("hem");

                    const dn = ["am", "pm"];

                    console.log(currentTime.getHours());
                    console.log(currentTime.getMinutes());

                    setInterval(()=&gt;{
                        let currentTime = new Date();
                        hrs.innerHTML = currentTime.getHours();
                        min.innerHTML = currentTime.getMinutes();

                        if (currentTime.getHours &gt; 12) {
                            hem.innerHTML = dn[2];
                            hrs.innerHTML = (currentTime.getHours() - 12);
                        }
                        else {
                            hem.innerHTML = dn[1];
                            hrs.innerHTML = (currentTime.getHours() - 12);
                        }
                    },1000);
              &lt;/script&gt;
            &lt;/div&gt;
          &lt;div style="float: right"&gt;
              &lt;img src="4:3.jpg" alt="Video preview on this site hos broken." style="width:80%; float:right;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--takes up half the screen (horz)--&gt;
      &lt;main&gt;
          &lt;!--cut into 4 segments, like an excel--&gt;
          &lt;!--channel segment--&gt;
          &lt;!--next 30 min--&gt;
          &lt;!--30 min after--&gt;
          &lt;!--one hour after--&gt;
      &lt;/main&gt;
      &lt;!--takes up 20% of the screen (horz)--&gt;
      &lt;!--shows one ad--&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
&lt;/html&gt;

CSS:

html{
    background-color:#11284A;
    
    font-family:Arial;
    font-weight: bold;
    color:#D6E1E7;
}

.two_column {
    column-count: 2;
    column-gap: 3px;
}
.three_column {
    column-count: 3;
    column-gap: 3px;
}