Issue moving div up a page with CSS

Question

I am trying to move the midblock tag up the page a little bit to be closer to the

<ul class="toplist">
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></a></li>
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="salads"></a></li>
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="burgers-sandwiches"></a></li>
<li class="header"><a href="/menu/sides"><img src="https://i.imgur.com/T4ZAaK3.png" class ="sides"></a></li>
<li class="header"><a href="/menu/smoothies-shakes"><img src="https://i.imgur.com/T4ZAaK3.png" class ="smoothies-milkshakes"></a></li>
<li class="header"><a href="/menu/kids-real-meals"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></a></li>
</ul>

section. When I change the bottom distance in the midblock nothing changes. Can someone help me move this up a little bit to be closer to the top menu? I am including a jsfiddle. https://jsfiddle.net/xfmets37/ I have been trying this for a while now and just can't seem to get it to work. My alignment also seems to be just barely off in the jsfiddle so if you happen to know a quick fix to that I'd love to hear it but that is not the question here. Could someone please help me get my vertical alignment correct?

Answer 1

The tag has a margin, just modify the margin-bottom for that, not the midblock margin, or change the margin to 0 and then modify the midblock margin

Answer 2

add margin:0 0 20px 0;

img.kale-grain-bowls, img.salads, img.burgers-sandwiches, img.sides,
img.smoothies-milkshakes, img.kids-real-meals{
	width: 100%;
	max-height: 100px;
}
.page{
	position: relative;
	height: 100%;
	width: 100%;
	text-align: center;
}
.video, .front-promo-1,
.front-promo-2, .events,
.family-foundation, .partners,
.fundraisers, .cousins, .geniuses,
.greats, .vision{
	margin: 2.5px;
	float: left;
	position: relative;
}
.video{
	height: 300px;
	background-image: url('https://i.imgur.com/n3z21Ms.png');
}
.front-promo-1{
	height: 147.5px;
	background-image: url('https://i.imgur.com/iag6xGh.png');
}
.front-promo-2{
	height: 147.5px;
	background-image: url('https://i.imgur.com/iag6xGh.png');
}
.bgood-footer{
	width:100%;
    margin: 0 auto;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

img.footer-img{
    max-width:50px;
}
img.mobile-app-img{
	max-width: 150px;
	height: 100%;
}
img.talk-to-us-img{
	max-width: 150px;
	height: 100%;
}
img.careers-img{
	max-width: 100px;
	height: 100%;
}
img.press-img{
	max-width: 100px;
	height: 100%;
}
img.ordering-loc-img{
	max-width: 240px;
	height: 100%;
}
ul.clearfix{
  list-style:none;
  margin:2px;
  padding:2px 2px;
  width:100%;
  float:left;
}
li.foot{
  float:left;
  height: 45px;
}
li.left {
  float:left;
}

li.mid{
  float:left;
  max-width: 10%;
}
li.right{
  float:left;
}
ul.toplist{
  list-style:none;
  padding:0px;
  margin:0 0 20px 0;
  width:100%;
  float:left;
}
li.header{
	float:left;
	height: 100%;
	width: 16%;
	margin: 0px 2.5px;
}
.midblock{
	max-width:100%;
	bottom: 20px;
}/*for mobile phones: */
	[class*="col-"]{
		width:100%;
	}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8%;}
    .col-m-2 {width: 16%;}
    .col-m-2-5 {width: 21.55%;}
    .col-m-3 {width: 28%;}
    .col-m-4 {width: 32.5%;}
    .col-m-5 {width: 40%;}
    .col-m-6 {width: 48%;}
    .col-m-7 {width: 56%;}
    .col-m-8 {width: 65.7%;}
    .col-m-9 {width: 72%;}
    .col-m-10 {width: 80%;}
    .col-m-11 {width: 88%;}
    .col-m-12 {width: 96%;}
    /*footer data: */
}
@media only screen and (min-width: 768px){
	/*for mobile desktop: */
	.col-1 {width: 8%;}
	.col-2-5 {width: 21.55%;}
    .col-2 {width: 16%;}
    .col-3 {width: 28%;}
    .col-4 {width: 32.5%;}
    .col-5 {width: 40%;}
    .col-6 {width: 48%;}
    .col-7 {width: 56%;}
    .col-8 {width: 65.7%;}
    .col-9 {width: 72%;}
    .col-10 {width: 80%;}
    .col-11 {width: 88%;}
    .col-12 {width: 96%;}
    /*footer data: */
}

<div class="page">
<ul class="toplist">
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></a></li>
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="salads"></a></li>
<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="burgers-sandwiches"></a></li>
<li class="header"><a href="/menu/sides"><img src="https://i.imgur.com/T4ZAaK3.png" class ="sides"></a></li>
<li class="header"><a href="/menu/smoothies-shakes"><img src="https://i.imgur.com/T4ZAaK3.png" class ="smoothies-milkshakes"></a></li>
<li class="header"><a href="/menu/kids-real-meals"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></a></li>
</ul>
<div class ="midblock">
<div class="col-m-8 col-8 video">Video</div>
<a href="/promo/temp1"><div class="col-m-4 col-4  front-promo-1">Promo one</div></a>
<a href="/promo/temp2"><div class="col-m-4 col-4 front-promo-2">Promo two</div></a>
</div>
<div class="bgood-footer">
<ul class="clearfix">
	<li class="left foot"><a href="/mobile-app"><img src="https://i.imgur.com/C3CjRJS.png" class ="mobile-app-img"></a></li>
	<li class="left foot"><a href="/talk-to-us"><img src="https://i.imgur.com/CRvhpM9.png" class ="talk-to-us-img"></a></li>
	<li class="left foot"><a href="/careers"><img src="https://i.imgur.com/6J0kt1a.png" class ="careers-img"></a></li>
	<li class="left foot"><a href="press"><img src="https://i.imgur.com/NzpWMU3.png" class ="press-img"></a></li>
        <li class = "mid foot foot-m-0"></li>
        <!-- Facebook -->
	<li class="foot"><a href="https://www.facebook.com/bgood"><img src="https://i.imgur.com/CH1OTMP.png" class ="footer-img"></a></li>
        <!-- Youtube -->
	<li class="foot"><a href="https://www.youtube.com/user/unclefaris"><img src="https://i.imgur.com/S2BQXoT.png" class ="footer-img"></a></li>
        <!-- Twitter -->
	<li class="foot"><a href="https://twitter.com/b_good_"><img src="https://i.imgur.com/NgTYmsd.png" class ="footer-img"></a></li>
        <!-- Instagram -->
	<li class="foot"><a href="https://www.instagram.com/b.goodofficial/"><img src="https://i.imgur.com/RD3YjT6.png" class ="footer-img"></a></li>
        <!-- Location -->
	<li class="right foot"><a href=""><img src="https://i.imgur.com/MV5BJA3.png" class ="ordering-loc-img"></a></li>
</ul>
</div>
</div>

or you can add this to the top off your css but it would normalize everything

 *{
      padding:0;
      margin:0;
    }

Answer 3

The issue is the UL tag gets margin added from the browser. You need to add normalize.css to your site or ul,ol,dl{margin:0; padding:0}

Answer 4

Just add position: relative; to your .midblock.

Positioning like bottom: 20px can only be applied to positioned elements. See positions on MDN or w3schools.