コンテンツとコンテンツの間でナビを削除するにはどうすればよいですか？

Question

私はウェブサイトを作成していますが、問題があります。ここでは、コードです（スライダ作品は、なくcodepen上）：link

(Between nav and content a big indent) I do not need this indent 

第一の問題：どのように伸ばして、ページ全体にNAV（幅：100％解決しませんか）？ （現時点では、すべての場所が占有されているわけではありません）

2番目の問題：ナビゲーションとコンテンツの間にインデントがあります。どのようにそれを削除するには？

Answer 1

変更を表示するには、コードスニペットをフルページで実行します。変更点：

i）はNAV ULは、次のコードは、それが柔軟にし、（フレキシボックスを使用しているとき、彼らはもはや必要とされてフロートが削除されていない）フレキシボックスを使用して、ページの幅全体にそれを伸ばすために追加されました：

display: flex; 
align-items: stretch; 
justify-content: space-between; 
margin: 0; //Changing this to 0 removes the indentation b/w nav & content 

II）のnav Liは、それが成長し、ビューポートのサイズ変更に応じて縮小できるようにするの変化があります。

text-align: center; 
flex: 1; 

var slideNow = 1; 
 
var slideCount = $('#slidewrapper').children().length; 
 
var slideInterval = 3000; 
 
var navBtnId = 0; 
 
var translateWidth = 0; 
 

 
$(document).ready(function() { 
 
    var switchInterval = setInterval(nextSlide, slideInterval); 
 

 
    $('#viewport').hover(function() { 
 
    clearInterval(switchInterval); 
 
    }, function() { 
 
    switchInterval = setInterval(nextSlide, slideInterval); 
 
    }); 
 

 
    $('#next-btn').click(function() { 
 
    nextSlide(); 
 
    }); 
 

 
    $('#prev-btn').click(function() { 
 
    prevSlide(); 
 
    }); 
 

 
    $('.slide-nav-btn').click(function() { 
 
    navBtnId = $(this).index(); 
 

 
    if (navBtnId + 1 != slideNow) { 
 
     translateWidth = -$('#viewport').width() * (navBtnId); 
 
     $('#slidewrapper').css({ 
 
     'transform': 'translate(' + translateWidth + 'px, 0)', 
 
     '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
 
     '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
 
     }); 
 
     slideNow = navBtnId + 1; 
 
    } 
 
    }); 
 
}); 
 

 

 
function nextSlide() { 
 
    if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) { 
 
    $('#slidewrapper').css('transform', 'translate(0, 0)'); 
 
    slideNow = 1; 
 
    } else { 
 
    translateWidth = -$('#viewport').width() * (slideNow); 
 
    $('#slidewrapper').css({ 
 
     'transform': 'translate(' + translateWidth + 'px, 0)', 
 
     '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
 
     '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
 
    }); 
 
    slideNow++; 
 
    } 
 
} 
 

 
function prevSlide() { 
 
    if (slideNow == 1 || slideNow <= 0 || slideNow > slideCount) { 
 
    translateWidth = -$('#viewport').width() * (slideCount - 1); 
 
    $('#slidewrapper').css({ 
 
     'transform': 'translate(' + translateWidth + 'px, 0)', 
 
     '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
 
     '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
 
    }); 
 
    slideNow = slideCount; 
 
    } else { 
 
    translateWidth = -$('#viewport').width() * (slideNow - 2); 
 
    $('#slidewrapper').css({ 
 
     'transform': 'translate(' + translateWidth + 'px, 0)', 
 
     '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
 
     '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
 
    }); 
 
    slideNow--; 
 
    } 
 
}

/* This is a Header*/ 
 

 
body { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
/*This is a navbar*/ 
 

 
#nav { 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: stretch; 
 
    justify-content: space-between; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    background-color: #2b3030; 
 
    border-bottom: 1px solid #ccc; 
 
    border-top: 1px solid #ccc; 
 
} 
 

 
#nav li { 
 
    text-align: center; 
 
    flex: 1; 
 
} 
 

 
#nav li a { 
 
    display: block; 
 
    padding: 10px calc(100%/7); 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: white; 
 
} 
 

 
#nav li a:hover { 
 
    color: white; 
 
    background-color: #12700c; 
 
} 
 

 

 
/*Content*/ 
 

 

 
/* This is a slider */ 
 

 
#block-for-slider { 
 
    width: 1280px; 
 
    margin: 0 auto; 
 
} 
 

 
#viewport { 
 
    width: 100%; 
 
    display: table; 
 
    position: relative; 
 
    overflow: hidden; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
} 
 

 
#slidewrapper { 
 
    position: relative; 
 
    width: calc(100% * 4); 
 
    top: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-transition: 1s; 
 
    -o-transition: 1s; 
 
    transition: 1s; 
 
    -webkit-transition-timing-function: ease-in-out; 
 
    -o-transition-timing-function: ease-in-out; 
 
    transition-timing-function: ease-in-out; 
 
} 
 

 
#slidewrapper ul, 
 
#slidewrapper li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#slidewrapper li { 
 
    width: calc(100%/4); 
 
    list-style: none; 
 
    display: inline; 
 
    float: left; 
 
} 
 

 
.slide-img { 
 
    width: 100%; 
 
} 
 

 
#prev-btn, 
 
#next-btn { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    top: calc(50% - 25px); 
 
} 
 

 
#prev-btn:hover, 
 
#next-btn:hover { 
 
    cursor: pointer; 
 
} 
 

 
#prev-btn { 
 
    left: 20px; 
 
} 
 

 
#next-btn { 
 
    right: 20px; 
 
} 
 

 
#nav-btns { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 20px; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 

 
.slide-nav-btn { 
 
    position: relative; 
 
    display: inline-block; 
 
    list-style: none; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    margin: 3px; 
 
} 
 

 
.slide-nav-btn:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
    <ul id="nav"> 
 
    <li><a href="#">Lalala</a></li> 
 
    <li><a href="#">Lalala</a></li> 
 
    <li><a href="#">Lalala</a></li> 
 
    <li><a href="#">Lalala</a></li> 
 
    <li><a href="#">Lalala</a></li> 
 
    <li><a href="#">Lalala</a></li> 
 
    <li><a href="#">Lalala</a></li> 
 
    </ul> 
 
</div> 
 
<div class="content"> 
 

 
    <div id="block-for-slider"> 
 
    <div id="viewport"> 
 
     <ul id="slidewrapper"> 
 
     <li class="slide"><img src="http://placehold.it/1280x250" alt="" class="slide-image"></li> 
 
     <li class="slide"><img src="http://placehold.it/1280x250" alt="" class="slide-image"></li> 
 
     <li class="slide"><img src="http://placehold.it/1280x250" alt="" class="slide-image"> </li> 
 
     <li class="slide"><img src="http://placehold.it/1280x250" alt="" class="slide-image"></li> 
 
     </ul> 
 

 
     <div id="prev-next-btns"> 
 
     <div id="prev-btn"></div> 
 
     <div id="next-btn"></div> 
 
     </div> 
 
     <ul id="nav-btns"> 
 
     <li class="slide-nav-btn"></li> 
 
     <li class="slide-nav-btn"></li> 
 
     <li class="slide-nav-btn"></li> 
 
     <li class="slide-nav-btn"></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>