To make html elements closer to each other - html

Question

I have this long form for users with several html elements.
I used Materialize framework for it.
Here's the collpsible link.
The form is getting too long.
How to remove some space between elements and make it all narrower so I don't need to scroll down?
I didn't find it in framework options.
Here's the html code for the elements:
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">add</i>
<input id="stat" type="text" class="validate">
<label for="stat">Добавить новую статистику</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">assignment</i>
<input id="des" type="text" class="validate">
<label for="des">Добавить описание статистики</label>
</div>
</div>
<div class="row">
<div class="input-field col s1">
<i class="material-icons prefix">trending_down</i>
</div>
<div class="input-field col s8">
<h6>
Добавить минимальное значение
</h6>
</div>
<div class="input-field col s3">
<input id="des" type="text" class="validate">
</div>
</div>
<div class="row">
<div class="input-field col s1">
<i class="material-icons prefix">trending_up</i>
</div>
<div class="input-field col s8">
<h6>
Добавить максимальное значение
</h6>
</div>
<div class="input-field col s3">
<input id="des" type="text" class="validate">
</div>
</div>
<a class="waves-effect waves-light btn-small #039be5 light-blue darken-1" id="btn"><i class="material-icons right">send</i>Добавить</a>
<p> </p>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>Добавить данные в статистики:</div>
<div class="collapsible-body">
<span>
<div class="row">
<div class="input-field col s1">
<p>
<i class="material-icons prefix">wb_sunny</i>
</p>
</div>
<div class="input-field col s7">
<select class="icons browser-default" id="weeksSel2" onChange ="getWeekText2();">
<option value="" disabled selected>Выберите неделю</option>
</select>
</div>
</div>
</span>
</div>
</li>
</ul>
</div>
<!-- end of container -->

Answer 1

I'm not very much hands on the materializecss, but I found the same problem somebody is facing, have a look this might can help you out.
As per below link you need to consolidate all the col element in the single row.
Spacing Between Rows with Materialize CSS

Answer 2

You might want to remove margin-bottom from .row.
<div class="row">
Add another class to your div with class row, say custom-row
<div class="row custom-row">
and add style:
.custom-row {
margin-bottom: 0 !important; /*this will override margin-bottom:10px from '.row'
}
This will keep all the styles from .row but override the margin-bottom
Hope it helps!