Something strange happened, and now there's a big gap following the top image. I was working on making the code responsive and then inserted this image, which messed everything up. Any ideas on what I might be doing wrong? I want the image to be closer to the 2 columns of content below it.
I've tried adjusting the flexbox and the image, but so far, nothing is working.
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>