Remove Gap between navbar and carousel in materialize use vuejs and laravel

Question

I would like to remove gap between navbar and carousel in materialize design. I used vue component for each div and laravel as backend. I use Sass for precompiler css. I had try to setting the margin body, margin for navbar, and margin for carousel through sass. Also I want to try to setting the margin through style scoped in vue component. But it didn't change , the gap still appears.

This is my code :

Navbar.vue

<template>
<nav class="white z-depth-1">
 <a href="#" class="brand-logo"><img :src="'img/logo.png'" width="50px" height="50px" alt="Logo" style="margin-left:50px; margin-top:5px;"></a>
 <ul id="nav-mobile" class="right">
 <li>
 <div class="center row">
 <div class="col s12">
 <div class="input-field">
 <i class="material-icons prefix">search</i>
 <input type="text" class="center" />
 </div>
 </div>
 </div>
 </li>
   <li><a href="sass.html">artist</a></li>
   <li><a href="badges.html">merchandise</a></li>
   <li><a href="collapsible.html">about</a></li>
   <li><a href="collapsible.html">login</a></li>
   <li><a href="collapsible.html">register</a></li>
 </ul>
 </nav>

</template>

<script>
export default{}
</script>

carousel.vue

<template>
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img src="/img/carone.jpg"></a>
<a class="carousel-item" href="#two!"><img src="/img/cartwo.jpeg"></a>
<a class="carousel-item" href="#three!"><img src="/img/carthree.jpeg"></a>
<a class="carousel-item" href="#four!"><img src="/img/carfour.jpeg"></a>
</div>
</template>
<style lang="scss" scoped>
.carousel{
margin-top: -20px;
}

</style>

<script>
$(function(){
setInterval(function() {
$('.carousel').carousel('next');
}, 2000); 
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true
});
});
</script>

App.js

/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/

require('./bootstrap');

window.Vue = require('vue');

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/

Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('carousel-component', require('./components/Navbar.vue'));

const app = new Vue({
el: '#app'
});

App.Scss

@import "~materialize-css/sass/components/color-variables";

 @import "~materialize-css/sass/components/variables";


  @import '~materialize-css/sass/materialize';
  @font-face {
  font-family: 'VojoCustomize'; /*a name to be used later*/
  src: url('/fonts/GeosansLight.ttf');
  }

nav ul li a{
color: $primary-color;
border-bottom-color: rgba(0,0,0,0);
font-family: VojoCustomize, sans-serif;
font-style: normal;
font-weight: bold;
}
.carousel{
max-height: 400px;
margin: 0 !important;
}

nav .input-field input[type='text'] {
height: 50px;
background-color: $primary-color;
margin-right: 30px;
border-radius: 10px;
margin-top: 5px;
width: 600px;
}

.yellow-primary-color{
color : $primary-color-dark;
}
.custom-textfield{
border-radius: 20px;
width: 100vw;
height : 50vh;
background-color: $primary-color;
}

Appear in browser

Sorry for my bad English. But, I'm really stuck. Please give me advise for this problem. Thank You.

Answer 1

To fix you should remove the bottom margin (added by Materialize-CSS) of the row class and the input element inside your nav.

The following css snippet should fix your problem:

/* remove input bottom margin */
nav .input-field input[type='text'] {
  margin-bottom: 0;
}
/* remove .row bottom margin */
nav .row {
  margin-bottom:0;
}