How do I get rid of the gap after the image?

Question

No entirely sure what happened, but I have a large gap after the top image. I've been tweaking the code so it's responsive and then added this image and everything got thrown off. Any thoughts on what I'm doing wrong. Ideally the image is much closer to the 2 columns of content below.

I've tried messing with the flexbox and the image and nada is happening.

    html {
     width: 960px;
     font-size: 100%;
     font-family: "Arial", sans-serif;
     color: #112271;
     margin: 0 auto;
    }
    
    .flex-container {
     width: 960px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
    }
    
    .banner-image {
     width: 960px;
     min-height: 50px;
     background: #112271;
     padding-top:  10px;
     padding-left: 20px;
     padding-bottom: 10px;
    }
    
    .banner-image h1 {
     color: white;
    }
    
    .topics-sidebar {
     width: 320px;
     padding-top: 40px;
    }
    
    .main-content {
     width: 640px;
     padding-top:  40px;
    }
    
    .individual-post {
     margin-bottom: 50px;
    }
    
    .main-content p.return-link {
     margin-bottom: 50px;
    }
    
    /* Left arrow for links that return to index.html */
    
    i {
     border: solid #112271;
     border-width: 0px 2px 2px 0px;
     padding: 5px;
     display: inline-block;
    }
    
    .left {
     transform: rotate(135deg);
     -webkit-transform: rotate(135deg);
      }
    
    
    ul {
     list-style-type: none;
     padding: 0;
     line-height: 2;
    }
    
    a:link, a:visited {
     color: #112271;
    }
    
    a:hover {
     color: #F09F08 ;
    }

    <!DOCTYPE html>
    
     <head>
      <link rel="stylesheet" href="../html-visual/styles.css">
      <title>HTML & CSS Cheatsheet</title>
     </head>
    
     <body>
      <div class="flex-container">
       <div class="banner-image">
        <h1>HTML & CSS Cheatsheet</h1>
       </div>
       <div class="topics-sidebar">
        <h3>Topics</h3>
        <ul>
         <a href="getting-started.html"><li>Getting Started</li></a>
         <a href="css-intro.html"><li>CSS</li></a>
         <a href="flexbox.html"><li>Flexbox</li></a>
         <a href="forms.html"><li>Forms</li></a>
         <a href="image.html"><li>Images</li></a>
         <a href="links.html"><li>Links</li></a>
         <a href="lists.html"><li>Lists</li></a>
         <a href="responsive-design.html"><li>Responsive Design</li></a>
         <a href="resources.html"><li>Resources</li></a>
         <a href="tables.html"><li>Tables</li></a>
        </ul>
       </div>
       <div class="main-content">
         <h2>Recent Posts</h2>
         <div class="individual-post">
          <a href="#"><p>General Template</a> | Last Updated Dec. 3, 2019</p>
          <p>This is the basic layout for a webpage.</p>
         </div>
         <div class="individual-post">
          <a href="#"><p>Linking a CSS File</a> | Last Updated Dec. 3, 2019</p>
          <p>Each HTML page must include a reference to the external style sheet file.</p>
         </div>
         <div class="individual-post">
          <a href="#"><p>Box Model</a> | Last Updated Dec. 3, 2019</p>
          <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
         </div> 
       </div>
      </div>
     </body>
    
     <footer>
     </footer>
    </html>

Does this answer your question? [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) — GammaGames, Dec 12 '19 at 15:26
Not part of the problem, but: You can't have an `` element around a `
And "overlapping" elements like `
General Template
` is also not allowed. — RoToRa, Dec 12 '19 at 15:29

score 0 · Answer 1 · answered Dec 12 '19 at 19:56

0

You just have to get rid of

padding-top: 40px

at your .main-content and .topics-sidebar

Or change them to any value you want

A better solution is to set

margin-bottom : (YOUR_VALUE)px

to your .banner-image

answered Dec 12 '19 at 19:56

Alopwer

611
8
22

Oh duh! Awesome. Thanks! – danibeet Dec 13 '19 at 15:31

How do I get rid of the gap after the image?

1 Answers1