title: My floating/clearfix works on desktop but breaks on phone
body: <p>I have some divs that I have created that works alright when viewed on desktop but when the same page is viewed on a phone it breaks. I just dont understand why... Wherever I put clearfix it breaks...</p>
  
  <p>MY CSS</p>
  
  <pre><code>* {
  box-sizing: border-box;
  }
  
  body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: white;
  }
  
  .logo {
  font-size: 24px;
  float: right;
  font-weight: 700;
  margin-top: 5px;
  margin-bottom: 0px;
  
  padding: 0;
  color: darkred;
  }
  
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  nav {
  
  box-shadow: 0 0 15px 0 rgba(0,0,0,.10);
  }
  
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    text-align: left;¨
  }
  
  nav li {
    display: inline-block;
  }
  
  nav a {
    color: #444;
    text-decoration: none;
    display: block;
    padding: .75em 1.75em;
  }
  
  nav li:hover {
    background: #444;
  }
  
  nav li:hover a {
    color: #fff;
  }
  
  
  .menu-sub {
    position: absolute;
    left: 0;
    background: #444;
    width: 100%;
    display: none;
    color: #fff;
    padding: 2em;
  }
  
  nav li:hover .menu-sub {
    display: block;
  }
  
  .menu-sub li {
    display: block;
  }
  
  .menu-sub a {
    padding: 0;
    margin-bottom: .35em;
  }
  
  .menu-sub a:hover {
    text-decoration: underline;
  }
  
  .menu-category {
    margin: 2.5em 0 .5em;
  }
  
  .menu-category:first-of-type {
    margin-top: 0;
  }
  
  .menu-col-1,
  .menu-col-2,
  .menu-col-3,
  .menu-col-4 {
    float: left;
  }
  
  .menu-col-1 {
    width: 25%;
  }
  
  .menu-col-2 {
    width: 50%;
  }
  
  .main {
  margin: 0 auto;
  margin-top: 50px;
  max-width: 1000px;
  height: 480px;
  box-shadow: 0 0 15px 0 rgba(0,0,0,.10);
  }
  
  .text {
  max-width: 600px;
  float: left;
  padding: 25px;
  }
  .image {
  max-width: 400px;
  float: left;
  clear: right;
  }
  h1 {
    color: darkred;
    padding: 0;
    margin: 0;
  }
  
  
  .bottom {
  margin: 0 auto;
  margin-top: 50px;
  max-width: 1000px;
  height: 40px;
  padding-left: 25px;
  color: darkred;
  line-height: 40px;
  clear: both;
  box-shadow: 0 0 15px 0 rgba(0,0,0,.10);
  }
  </code></pre>
  
  <p>MY HTML</p>
  
  <pre><code>&lt;html lang="sv-se"&gt;
  &lt;head&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
  &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;Reclam, ditt tryckeri online!&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav&gt;
  
        &lt;div class="container"&gt;
          &lt;p class="Logo"&gt;ReClam.&lt;/p&gt;
          &lt;ul class="menu-main"&gt;
  
  
            &lt;li&gt;&lt;a href=""&gt;Trycksaker&lt;/a&gt;
              &lt;div class="menu-sub"&gt;
                &lt;div class="menu-col-1"&gt;
                  &lt;h3 class="menu-category"&gt;Flyers&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="menu-col-1"&gt;
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="menu-col-1"&gt;
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="menu-col-1"&gt;
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
  
            &lt;li&gt;&lt;a href=""&gt;Tab 02&lt;/a&gt;
              &lt;div class="menu-sub"&gt;
                &lt;div class="menu-col-2"&gt;
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="menu-col-1"&gt;
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  
                &lt;div class="menu-col-1"&gt;
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h3 class="menu-category"&gt;Category&lt;/h3&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 01&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 02&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 03&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 04&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 05&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
  
            &lt;li&gt;&lt;a href=""&gt;Tab 03&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=""&gt;Tab 04&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;div class="main"&gt;
  &lt;div class="text"&gt;
  &lt;article&gt;
  &lt;h1&gt;Reclam hälsar dig välkommen!&lt;/h1&gt;
  &lt;p&gt;Titta runt bland våra trycksaker, skyltar, textiltryck och profilprodukter. Räkna ut priser och beställ direkt på hemsidan.&lt;/p&gt;
  &lt;p&gt;I dagens samhälle suddas de traditionella linjerna ut mellan tryckerier, reklambyråer, databashanterare och webbleverantörer. Samtidigt används medierna som komplement till varandra på ett sätt vi inte är vana vid. Just därför har vi startat Reclam, för att kunna erbjuda våra kunder hjälp hela vägen. Vi kan hjälpa till med allt ifrån att ta fram flöden för er fakturaprint till att helt ta över er kundreskontrahantering eller bara trycka tio tröjor till er firmafest. Tveka inte ringa oss om du undrar något, de bästa råden är gratis!&lt;/p&gt;
  &lt;/article&gt;
  &lt;/div&gt;
  &lt;div class="image"&gt;
  &lt;img src="start.jpg" alt="Bild på telefon och en bok" height="480" width="400"&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
    &lt;div class="bottom"&gt;
  
  
  &lt;p&gt;Info&lt;/p&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>