Hello,

I am trying to reduce the space between my main-header information and content in my container. I have tried to do this with negative margins and max-height properties. However I can not get it to work. If anyone know a trick to do for this, it would be much appreciated.

HTML

<div id="header_info"> <header class="main-header"> <h1>Tracy Excell</h1> <ul class="nav"> <li><a id="home">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </header>

<div id="wrapper">

<img src="images/kiwiicon2.jpg" alt="Profile-picture" class="profile-image">

<div id="first-paragraph"> <p class="paragraph">Hi I'm a front end developer who loves responsive design and css.
I recently finished a degree in front end web development at Treehouse and am excited to put all my skills to use!</p> </div> </div>

<div id="container">

CSS

@media (min-width: 769px) {

columns {

-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
flex-wrap: no-wrap;

}

.main-header h1 {

justify-content: center;

}

.nav { flex-direction: row; max-width: 350px;

}

.nav li {

border: none;
background-color:#eff5f5;
justify-content: center;

}

body { margin: 2em; padding: 0; }

header-info {

position: relative;

}

.profile-image { position: absolute; right: 5em; height: 200px; width: 200px;

}

first-paragraph {

position: absolute;
left: 3em;
width: 500px;

}

header-info {

max-height: 300px;

}