My text inside the <p> element is being pushed down by the presence of the <ins> tag. Removing the <ins> tag from the DOM using developer tools results in my text returning to its expected position.
main {
max-width: 1000px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
#portal-wrapper {
width: 100%;
padding: 40px 0;
background: #fff;
}
aside {
width: 100%;
padding: 10px 20px 20px;
box-sizing: border-box;
position: relative;
}
@media only screen and (min-width: 795px) {
main {
display: table;
}
#portal-wrapper {
display: table-cell;
min-width: 400px;
max-width: 680px;
width: auto;
}
aside {
width: 300px;
display: table-cell;
padding-right: 0;
padding-top: 41px;
}
}<main>
<div id="portal-wrapper">
<div id="portal">
<p>
Here's my text. Why am I pushed down so far.
</p>
</div>
</div>
<aside>
<ins style="display: block; height: 600px;"> </ins>
</aside>
</main>Fiddle available at: https://jsfiddle.net/wwvq7net/1/