All geek questions in one place

How to get rid of "margin"

I would like to know how to get rid of the white space at the very bottom of my web page, it really annoys me, and it should not be there.

Code below:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="freeloves.css">

HTML code:

  <body>      
  <div class="nav">
  <div class="nav-wrapper">
  <ul>
    <li><img src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/logo.png" class="logo" alt="The Free Loves" width="544" height="100" /></li>
    <li><a href="test.html">Home</a></li>
    <li><a href="test/index.html%3Fp=2103.html">Album <img src="arrow.png" alt="arrow" class="arrow"></a>
    <ul>
      <li><a href="test/index.html%3Fp=2441.html">Album Featured</a></li>
      <li class="submenu-item2"><a href="test/index.html%3Fp=2103.html">No Space<img src="arrow.png" alt="arrow" class="arrow2"></a>
      <ul>
        <li><a href="test/index.html%3Fp=2377.html">Album 1 Column, No Space</a></li>
        <li><a href="test/index.html%3Fp=2356.html">Album 2 Columns, No Space</a></li>
        <li><a href="test/index.html%3Fp=2103.html">Album 3 Columns, No Space</a></li>
        <li><a href="test/index.html%3Fp=2357.html">Album 4 Columns, No Space</a></li>
      </ul>
    </li> 
    <li class="submenu-item62"><a href="test/index.html%3Fp=2360.html">With Space <img src="arrow.png" alt="arrow" class="arrow2"></a>
      <ul>
        <li><a href="test/index.html%3Fp=2378.html">Album 1 Column With Space</a></li>
        <li><a href="test/index.html%3Fp=2361.html">Album 2 Columns With Space</a></li>
        <li><a href="test/index.html%3Fp=2360.html">Album 3 Columns With Space</a></li>
        <li><a href="test/index.html%3Fp=2362.html">Album 4 Columns With Space</a></li>
      </ul>
    </li>
    <li id="menu-item-3251" class="menu-item menu-item-type-taxonomy menu-item-object-album menu-item-3251"><a href="test/album/hundred-miles/index.html">Inside Album</a></li>
      </ul>
    </li>
    <li><a href="test/index.html%3Fp=2211.html">Event <img src="arrow.png" alt="arrow" class="arrow"></a>
    <ul>
      <li><a href="test/index.html%3Fp=2079.html">Event List</a></li>
      <li><a href="test/index.html%3Fp=2211.html">Event List With Month</a></li>
      <li><a href="test/index.html%3Fp=2434.html">Event Widget Style</a></li>
      <li><a href="test/index.html%3Fp=2101.html">Single Event</a></li>
    </ul>
    </li>
    <li><a href="test/index.html%3Fp=2446.html">Members</a></li>
    <li><a href="#">Pages <img src="arrow.png" alt="arrow" class="arrow"></a>
    <ul>
      <li><a href="http://themes.goodlayers2.com/musicclub/404error">404 Page</a></li>
      <li class="submenu-item50"><a href="test/index.html%3Fp=1424.html">Features <img src="arrow.png" alt="arrow" class="arrow2"></a>
      <ul>
        <li><a href="test/index.html%3Fp=1424.html">New Page Builder</a></li>
        <li><a href="test/index.html%3Fp=1482.html">Parallax/Color Wrapper</a></li>
        <li><a href="test/index.html%3Fp=1476.html">Custom Skin</a></li>
        <li><a href="test/index.html%3Fp=1493.html">Sidebar Size Customizable</a></li>
        <li><a href="http://www.thefreeloves.com/test/?page_id=1566">Scalable Container</a></li>
        <li><a href="test/index.html%3Fp=1572.html">Floating Navigation</a></li>
        <li><a href="test/index.html%3Fp=1569.html">Boxed/Full Style</a></li>
        <li><a href="test/index.html%3Fp=1575.html">Woocommerce Friendly</a></li>
        <li><a href="test/index.html%3Fp=1496.html">Mega Menu</a></li>
        <li><a href="test/index.html%3Fp=1513.html">Unlimited Sidebar</a></li>
        <li><a href="test/index.html%3Fp=1510.html">Font Uploader</a></li>
      </ul>
    </li> 
      <li  class="submenu-item51"><a href="test/index.html%3Fp=1321.html">Shop<img src="arrow.png" alt="arrow" class="arrow2"></a>
      <ul>
        <li><a href="test/index.html%3Fp=1231.html">Shop With Sidebar</a></li>
        <li><a href="test/index.html%3Fp=1321.html">Shop Full Width</a></li>
        <li><a href="test/index.html%3Fp=1232.html">Cart</a></li>
        <li><a href="test/index.html%3Fp=1233.html">Checkout</a></li>
        <li><a href="test/index.html%3Fp=1234.html">My Account</a></li>
      </ul>
    </li>
      <li><a href="test/index.html%3Fp=1629.html">Contact Page 1</a></li>
      <li><a href="test/index.html%3Fp=1631.html">Contact Page 2</a></li>
      <li class="submenu-item52"><a href="test.html#">Video Tutorial<img src="arrow.png" alt="arrow" class="arrow2"></a>
      <ul>
        <li><a href="test/index.html%3Fp=1746.html">Installing theme and Setting as demo site</a></li>
        <li><a href="test/index.html%3Fp=1762.html">Page Builder</a></li>
        <li><a href="test/index.html%3Fp=1748.html">Creating Portfolio &#038; Filterer</a></li>
        <li><a href="test/index.html%3Fp=1750.html">Creating Blog</a></li>
        <li><a href="test/index.html%3Fp=1754.html">Thumbnail Management</a></li>
        <li><a href="test/index.html%3Fp=1752.html">Creating Gallery</a></li>
      </ul>
    </li>
    <li class="submenu-item53"><a href="test.html#">Gallery<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul class="dl-submenu">
    <li><a href="test/index.html%3Fp=1598.html">Gallery 2 Columns</a></li>
    <li><a href="test/index.html%3Fp=1602.html">Gallery 3 Columns</a></li>
    <li><a href="test/index.html%3Fp=1605.html">Gallery 4 Columns</a></li>
    <li><a href="test/index.html%3Fp=1620.html">Gallery 5 Columns</a></li>
    <li><a href="test/index.html%3Fp=2419.html">Gallery 2 Columns With Caption</a></li>
    <li><a href="test/index.html%3Fp=2420.html">Gallery 3 Columns With Caption</a></li>
    <li><a href="test/index.html%3Fp=2421.html">Gallery 4 Columns With Caption</a></li>
    <li><a href="test/index.html%3Fp=2422.html">Gallery 5 Columns With Caption</a></li>
  </ul>
</li>
  <li class="menu-item"><a href="test/index.html%3Fp=84.html">Testimonial</a></li>
</ul>
</li>
<li class="menu-item"><a href="http://www.thefreeloves.com/test/?page_id=2171">Portfolio<img src="arrow.png" alt="arrow" class="arrow"></a>
<ul>
  <li class="submenu-item54"><a href="test.html#">Portfolio With Text<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/portfolio-1-column-with-text-and-space/page/1/index.html">Portfolio 1 Column With Text And Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=906">Portfolio 2 Columns With Text And Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=100">Portfolio 3 Columns With Text And Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=908">Portfolio 4 Columns With Text And Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=2147">Portfolio 2 Columns With Text, No Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=2146">Portfolio 3 Columns With Text, No Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=2148">Portfolio 4 Columns With Text, No Space</a></li>
  </ul>
</li>
  <li class="submenu-item70"><a href="test.html#">Portfolio Modern<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/portfolio-1-column-modern-with-space/page/1/index.html">Portfolio 1 Column Modern Style With Space</a></li>
    <li><a href="test/portfolio-2-columns-modern-with-space/page/1/index.html">Portfolio 2 Columns Modern Style With Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=2161">Portfolio 3 Columns Modern Style With Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=2162">Portfolio 4 Columns Modern Style With Space</a></li>
    <li><a href="test/portfolio-2-columns-modern-style-no-space/page/1/index.html">Portfolio 2 Columns Modern Style, No Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=2171">Portfolio 3 Columns Modern Style, No Space</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=2170">Portfolio 4 Columns Modern Style, No Space</a></li>
  </ul>
</li>
    <li class="submenu-item71"><a href="test.html#">Portfolio With Filter<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="http://www.thefreeloves.com/test/?page_id=954">Portfolio Grid 1 Columns With Filter</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=952">Portfolio Grid 2 Columns With Filter</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=949">Portfolio Grid 3 Columns With Filter</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=947">Portfolio Grid 4 Columns With Filter</a></li>
  </ul>
</li>
    </ul>
    <li class="menu-item"><a href="test/blog-full-with-right-sidebar/page/1/index.html">Blog<img src="arrow.png" alt="arrow" class="arrow3"></a>
<ul>
  <li class="submenu-item72"><a href="test.html#">Blog Full<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/blog-full-with-right-sidebar/page/1/index.html">Blog Full With Right Sidebar</a></li>
    <li><a href="test/blog-full-with-left-sidebar/page/1/index.html">Blog Full With Left Sidebar</a></li>
    <li><a href="test/blog-full-with-both-sidebar/page/1/index.html">Blog Full With Both Sidebar</a></li>
    <li><a href="test/blog-full-without-sidebar/page/1/index.html">Blog Full Without Sidebar</a></li>
  </ul>
</li>
  <li class="submenu-item73" data-column="three columns" data-size="1/4"><a href="test.html#">Blog Column<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/blog-1-column/page/1/index.html">Blog 1 Column (Right Sidebar)</a></li>
    <li><a href="test/blog-2-columns/page/1/index.html">Blog 2 Columns (Right Sidebar)</a></li>
    <li><a href="test/index.html%3Fp=878.html">Blog 3 Columns</a></li>
    <li><a href="test/blog-4-columns/page/1/index.html">Blog 4 Columns</a></li>
  </ul>
</li>
  <li class="submenu-item74"><a href="test.html#">Blog Masonry<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/index.html%3Fp=887.html">Blog 2 Columns &#8211; Masonry (Right Sidebar)</a></li>
    <li><a href="test/index.html%3Fp=888.html">Blog 3 Columns &#8211; Masonry</a></li>
    <li><a href="test/index.html%3Fp=889.html">Blog 4 Columns &#8211; Masonry</a></li>
  </ul>
</li>
  <li class="submenu-item55"><a href="test/index.html%3Fp=2063.html">Blog Medium<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/index.html%3Fp=2065.html">Blog Medium With Left Sidebar</a></li>
    <li><a href="test/index.html%3Fp=2063.html">Blog Medium With Right Sidebar</a></li>
    <li><a href="test/index.html%3Fp=2067.html">Blog Medium With Both Sidebar</a></li>
    <li><a href="test/blog-medium-without-sidebar/page/1/index.html">Blog Medium Without Sidebar</a></li>
  </ul>
</li>
</ul>
<li><a href="test/index.html%3Fp=120.html">Shortcodes <img src="arrow.png" alt="arrow" class="arrow4"></a>
<ul>
  <li class="submenu-item61 menu-code"><a href="test.html#">Set 1<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/index.html%3Fp=149.html">Accordion/Toggle Box</a></li>
    <li><a href="test/index.html%3Fp=784.html">Audio Shortcode</a></li>
    <li><a href="test/index.html%3Fp=156.html">Button</a></li>
    <li><a href="test/index.html%3Fp=1017.html">Column Shortcode</a></li>
    <li><a href="test/index.html%3Fp=203.html">Divider</a></li>
    <li><a href="test/index.html%3Fp=2541.html">Event Widget</a></li>
    <li><a href="test/index.html%3Fp=705.html">Gallery Shortcode</a></li>
  </ul>
</li>
  <li class="submenu-item60 menu-code"><a href="test.html#">Set 2<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/index.html%3Fp=296.html">Heading Tag</a></li>
    <li><a href="test/index.html%3Fp=653.html">icons &#038; icon boxes</a></li>
    <li><a href="test/index.html%3Fp=211.html">Lightbox &#038; Frames</a></li>
    <li><a href="test/index.html%3Fp=236.html">Notification Boxes</a></li>
    <li><a href="test/index.html%3Fp=456.html">Members</a></li>
    <li><a href="test/index.html%3Fp=2525.html">Music Player</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=1039">Post Slider</a></li>
  </ul>
</li>
<li class="submenu-item80"><a href="test.html#">Set 3<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul class="sub-menu">
    <li><a href="http://www.thefreeloves.com/test/?page_id=1400">Price Table</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=1084">Process</a></li>
    <li><a href="http://www.thefreeloves.com/test/?page_id=258">Progress Circle</a></li>
    <li><a href="test/index.html%3Fp=245.html">Skills</a></li>
    <li><a href="test/index.html%3Fp=1045.html">Slider Shortcode</a></li>
    <li><a href="test/index.html%3Fp=640.html">Space</a></li>
  </ul>
</li>
    <li class="submenu-item81"><a href="test.html#">Set 4<img src="arrow.png" alt="arrow" class="arrow2"></a>
  <ul>
    <li><a href="test/index.html%3Fp=116.html">Styled Box</a></li>
    <li><a href="test/index.html%3Fp=285.html">Stunning Text</a></li>
    <li><a href="test/index.html%3Fp=687.html">Table</a></li>
    <li><a href="test/index.html%3Fp=218.html">Tabs</a></li>
    <li><a href="test/index.html%3Fp=428.html">Testimonial &#038; Quote</a></li>
    <li><a href="test/index.html%3Fp=120.html">Typography</a></li>
    <li><a href="test/index.html%3Fp=797.html">Video</a></li>
  </ul>
</li>
</ul>
</ul>
    </div>
    </div>
  <div class="slider">
    <div id="toggle-left" class="toggles"><i><img src="arrow-right.png" alt="left arrow" class="toggle-arrow" id="left-arrow"></i></div>
    <div id="toggle-right" class="toggles"><i><img src="arrow-right.png" alt="right arrow" class="toggle-arrow"></i></div>
    <ul class="slides">
    <li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
    <li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8847.jpg" alt="Free Loves"></li>
    <li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/HD-Musical-Instruments-Guitar-Wallpaper.jpg" alt="Free Loves"></li>
    <li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8607.jpg" alt="Free Loves"></li>
    <li class="li"><img class="slide" src="http://www.thefreeloves.com/prototype/test/wp-content/uploads/2015/02/FDA8373.jpg" alt="Free Loves"></li>
</ul>
</div>
<div class="music">
<!--<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/61481425&amp;auto_play=false&amp;hide_related=false&amp;show_comments=false&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>-->
</div>
<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash">   /   </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>

Javascript:

<script type="text/javascript">
$(document).ready(function(){
    $(".nav ul li").children("ul").hide(); //hides the lists when documents loads


    $(".nav ul li").hover( 
        function(){//onmouseover 
            $(this).children("ul").delay(450).slideDown(200); 
        }, 
        function(){//onmouseout 
            $(this).children("ul").slideUp(200); 
    }); 

    //cache DOM
    var $slider = $('.slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.li');
    var $slideImg = $slides.find('img');
    var $toggleLeft = $('#toggle-left');
    var $toggleRight = $('#toggle-right');
    var $pauseBtn = $('#pause-btn');
    var $playBtn = $('#play-btn');

    //configuration
    var width = $slider.width();
    var animationSpeed = 1500;
    var pause = 9000;
    var currentSlide = 1;

    var interval;

    $slideContainer.css('width', width * $slides.length);
    $slideImg.css('width', width);

    $pauseBtn.click(function(){stopSlider();$pauseBtn.toggle();$playBtn.toggle();});
    $playBtn.click(function(){startSlider();$playBtn.toggle();$pauseBtn.toggle();});
    $toggleLeft.click(function(){
        stopSlider();
        if (currentSlide === 1) {
            currentSlide = $slides.length;
            $slideContainer.css({'margin-left': '-'+width*($slides.length-1)+'px'});
            $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() {
                currentSlide--;
            });
        } else {
            $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function(){
                currentSlide--;
            });
        }
        startSlider();
    });
    $toggleRight.click(function(){
        stopSlider();
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
            currentSlide++;
            if (currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
        startSlider();
    });
    function startSlider() {
        interval = setInterval(function() {
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
                currentSlide++;
                if (currentSlide === $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }
            });
        }, pause);
    }

    function stopSlider() {
        clearInterval(interval);
    }
    startSlider();
});
</script>
<script>
$(document).ready(function(){

});
</script>

CSS:

body {
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  font-family: Arial;
  font-size: 16px;
}

body, html {
  margin: 0;
  height: 100%;
  width: 100%;
}

.nav-wrapper {
width: 100%;
margin: 0;
text-align: left;
}

.nav {
  background-color: rgba(34,34,34,0.5);
  padding-bottom: 10px;
  padding-top: 10px;
  position: fixed;
  z-index: 2;
  width: 100%;
}

.nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.nav ul li {
  display: inline-block;
  margin-right: 0px;
}

.nav ul li a,visited {
  color: #ccc;
  display: block;
  padding: 15px;
  text-decoration: none;
}

.nav ul li a:hover {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease-in;
}

.nav ul li:hover ul {
  display: block;
}

.nav ul li img.arrow {
  vertical-align: middle;
  padding-left: 5px;
  width: 17%;
  transform: rotate(270deg);
  transition-duration: 0.5s;
}

.nav ul li img.arrow3 {
  vertical-align: middle;
  padding-left: 5px;
  width: 24%;
  transform: rotate(270deg);
  transition-duration: 0.5s;
}

.nav ul li:hover img.arrow3 {
  vertical-align: middle;
  padding-left: 5px;
  width: 24%;
  transform: rotate(360deg);
  transition-duration: 0.5s;
}

.nav ul li:hover img.arrow4 {
  vertical-align: middle;
  padding-left: 5px;
  width: 12%;
  transform: rotate(360deg);
  transition-duration: 0.5s;
}

.nav ul li img.arrow4 {
  vertical-align: middle;
  padding-left: 5px;
  width: 12%;
  transform: rotate(270deg);
  transition-duration: 0.5s;
}

.nav ul li ul li:hover img.arrow2 {
  vertical-align: middle;
  padding-left: 5px;
  width: 7%;
  transform: rotate(360deg);
  transition-duration: 0.5s;
}

.nav ul li ul li img.arrow2 {
  vertical-align: middle;
  padding-left: 5px;
  width: 7%;
  transform: rotate(270deg);
  transition-duration: 0.5s;
}

.nav ul li:hover img.arrow {
  vertical-align: middle;
  padding-left: 5px;
  width: 17%;
  transform: rotate(360deg);
  transition-duration: 0.5s;
}

.nav ul ul {
  display: none;
  position: absolute;
  background-color: #222;
  border: 5px solid #222;
  min-width: 100px;
}

.nav ul ul li {
  display: block;
}


.nav ul ul li a,visited {
  color: #ccc;
}

.nav ul ul li a:hover {
  color: white;
  transition: color 0.2s ease-in;
}

.nav ul li ul li.submenu-item52 ul {
  min-width: 350px;
}

.nav ul ul li.submenu-item2 ul {
  left: 147px;
  top: 50px;
  min-width: 250px;
} 

.nav ul ul li.submenu-item50 ul {
  left: 150px;
  top: 50px;
  min-width: 250px;
}

.nav ul ul li.submenu-item62 ul {
  left: 147px;
  top: 100px;
  min-width: 250px;
}

.nav ul ul li.submenu-item51 ul {
  left: 150px;
  top: 100px;
  min-width: 250px;
}

.nav ul ul li.submenu-item52 ul {
  left: 150px;
  top: 252px;
}

.nav ul ul li.submenu-item53 ul {
  left: 150px;
  top: 303px;
  min-width: 250px;
}

.nav ul ul li.submenu-item54 ul {
  left: 190px;
  top: -1px;
  min-width: 350px;
}

.nav ul ul li.submenu-item55 ul {
  left: 150px;
  top: 151px;
  min-width: 345px;
}

.nav ul ul li.submenu-item60 ul {
  left: 152px;
  top: 50px;
}

.nav ul ul li.submenu-item61 ul {
  left: 150px;
  top: -1px;
}

.nav ul ul li.submenu-item70 ul {
  left: 189px;
  top: 50px;
  min-width: 350px;
} 

.nav ul ul li.submenu-item71 ul {
  left: 189px;
  top: 100px;
  min-width: 350px;
} 

.nav ul ul li.submenu-item72 ul {
  left: 140px;
  top: -1px;
  min-width: 350px;
}

.nav ul ul li.submenu-item73 ul {
  left: 150px;
  top: 50px;
  min-width: 345px;
}

.nav ul ul li.submenu-item74 ul {
  left: 150px;
  top: 100px;
  min-width: 350px;
}

.nav ul ul li.submenu-item80 ul {
  left: 153px;
  top: 100px;
  min-width: 350px;
}

.nav ul ul li.submenu-item81 ul {
  left: 153px;
  top: 151px;
  min-width: 350px;
}

.menu-code {
  max-width: 200px;
  min-width: 150px;
}

.menu-code ul li {
  max-width: 300px;
  min-width: 250px;
}

.logo {
  width: 75%;
  height: 75%;
  vertical-align: middle;
  margin-left: 100px;
}

.nav ul li ul {
  border-top: 1px solid #D4941F;
}

ul li ul li { 
border-bottom: 1px solid #111;
}

ul li ul {
  border-right: 5px solid #111;
}

.slider {
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
}
.slides, .slide {
    list-style: none;
    margin: 0;
    padding: 0;
}
.slides img {
    margin: auto;
    width: 100%;
    height: 971px;
    -webkit-filter: brightness(1); 
    filter: brightness(1);
}
.slide {
    float: left;
}
.slider .toggles {
    color: #000;
    height: 48px;
    margin: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    transition: all .3s linear;
    width: 48px;
    z-index: 3;
}
.slider .toggles:hover {
    cursor: pointer;
}
.slider:hover .toggles {
    opacity: 1;
}
.slider .toggles i:before {
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.slider #toggle-right i:before, #slider #toggle-left i:before {
    height: 20px;
    width: 18px;
}

#toggle-right {
    right: 0;
    margin-right: 100px;
    margin-bottom: auto;
}
#toggle-left {
    left: 0;
    margin-bottom: auto;
    margin-left: 75px;
}

#left-arrow {
  transform: rotate(180deg);
}

.toggle-arrow {
  width: 100px;
  height: 180px;
  opacity: 0.6;
}

.music {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0.5;
    width: 50%;
    margin-right: 100px;
    margin-top: 800px;
    transition: opacity 0.5s;
}

.music:hover {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0.9;
    width: 50%;
    margin-right: 100px;
    margin-top: 800px;
    transition: opacity 0.5s ease-in;
}

.content1 {
  background-image: url("http://www.thefreeloves.com/prototype/test/wp-content/uploads/2014/02/album-title.jpg");
  color: white;
  text-align: center;
  width: 100%;
  height: 10%;
  display: block;
  float: left;
}

.text1 {
  font-family: "Goudy Old Style", Optima, sans-serif;
  font-size: 40px;
}

.text2 {
  font-size: 30px;
  color: #6CB9D9;
}

.slash {
  color: white;
  font-size: 50px;
}
+4
source share
2 answers

The empty space is associated with this code:

<div class="content1">
<h3 class="text1">Our Latest Album<span class="slash">   /   </span><span class="text2">Fresh from the house of Music Club Band</span></h3>
</div>

If you remove this, the spaces will disappear.

But if you like it, you can decide to add margin-bottom: 0, and margin-top: 0to h3.text1:

.text1 {
  font-family: "Goudy Old Style", Optima, sans-serif;
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 0;
}

So beautiful !

+2
source

Most likely, this is due to the default position / position of the body. Try to add

html,body {padding:0; margin:0;}

See this page.

+1
source

Source: https://habr.com/ru/post/1608612/

More articles:


All Articles