Материализуйте сетку, поместив ненужное пространство между двумя колонками

Question

Я немного устал от фреймворка CSS, и я пытался сделать что-то простое: 2 столбца с разным размером для мобильных устройств и планшетов, однако между 2 столбцами есть раздражающее пространство, и я не могу понять, что

Мой JSFiddle

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="row">
  <div class="col s12 m3">
    <ul class="sidenav sidenav-fixed">
      <li class="bold"><a class="head-title green-text text-darken-1"><i class="material-icons">music_note</i>{{title}}</a></li>
      <li class="bold"><a><i class="material-icons">search</i>Buscar</a></li>
      <li class="bold"><a><i class="material-icons">stars</i>Artistas</a></li>
      <li class="bold"><a><i class="material-icons">book</i>Albums</a></li>
      <div class="divider"></div>
      <li class="bold"><a><i class="material-icons">build</i>Mis datos</a></li>
      <li class="bold"><a href="#"><i class="material-icons">close</i>Cerrar sesion</a></li>
    </ul>
  </div>

  <div class="col s12 m9">
    <form>
      <div>
        <label>Nombre</label>
        <input type="text" name="name" required>
      </div>
      <div>
        <label>Apellidos</label>
        <input type="text" name="surname" required>
      </div>
      <div>
        <label>Correo electronico</label>
        <input type="email" name="email" required>
      </div>

      <div class="row">
        <div class="col s6">
          <div class="file-field input-field">
            <div class="btn">
              <span>Foto</span>
              <input type="file">
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text">
            </div>
          </div>
        </div>

        <div class="col s6 center-align">
          <div class="">
            <img class="responsive-img">
          </div>
        </div>
      </div>

      <input type="submit" value="Actualizar mis datos" class="btn btn-primary">
    </form>
  </div>
</div>

Answer 1

Если вы говорите о промежутке, который я обозначил красными скобками на прикрепленном изображении - это не промежуток между двумя столбцами.Я пометил ваш первый столбец синим цветом фона.

Ваша боковая навигация имеет фиксированную ширину 300 пикселей, она просто не заполняет первый столбец.

materialize.min.css

.sidenav {
    position: fixed;
    width: 300px;
    left: 0;
    top: 0;
    margin: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    height: 100%;
    height: calc(100% + 60px);
    height: -moz-calc(100%);
    padding-bottom: 60px;
    background-color: #cf303000;
    z-index: 999;
    overflow-y: auto;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);

}