CSS: Fixed-sidebar in Vue.js

Question

I am creating a layout where a sidebar will be fixed on the left and placed next to a container which will have its own grid. I use Vue.js so every template has its <div> where I need to put other <div>s with the sidebar or the main content. Seems like my layout doesn't want to accept my CSS rules when I try to place my sidebar or give it a color, etc. Please help!

Here is my layout:

<template>
 <div>
  <sidebar />
  <main-content />
 </div>
</template>

Where the sidebar is:

<template>
<div>
<div class="sidebar">
  <div id="logo">
    <img src="" />
  </div>
  <h1><a href="#">Company</a></h1>
  <ul>
    <!--<li><a href="#">About</a></li>-->
    <!--<li><a href="#">Popular</a></li>-->
    <!--<li><a href="#">News</a></li>-->
    <!--<li><a href="#">Pages</a></li>-->
    <li><a href="#">Users</a>
      <ul id="sublist">
        <li><a href="#">Import</a></li>
        <li><a href="#">Invitations</a></li>
      </ul>
    </li>
    <!--<li><a href="#">Organisations</a></li>-->
    <li><a href="#">Polls</a></li>
  </ul>
 </div>
</div>
</template>

And the main content is (there is a table component inside):

<template>
<div>
<div class="container-grid">
  <div class="header">
    <h2>Users</h2>
    <button>Add</button>
    <h3>Import users</h3>
  </div>
  <main-table />
 </div>
</div>
</template>

Here is my CSS:

.sidebar {
height: 100%;
width: 300px;
max-width: 1024px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
box-sizing: border-box;
}
h1 {
display: inline;
height: 29px;
width: 156px;
}
ul,
#sublist {
list-style: none;
margin: 0;
padding: 0;
}
a {
height: 20px;
width: 200px;
text-decoration: none;
display: block;
}

// Main Content Style

.container-grid {
margin-left: 336px;
}

Answer 1

It works as expected here in the snippet, except I had one puzzling thing: it would not style .container-grid for me. I finally figured out that the reason was the embedded comment (// Main content style), which is not valid css. I don't know whether that might be an issue in your development environment.

new Vue({
  el: "#app",
  components: {
    sidebar: {
      template: '#sidebar-template'
    },
    mainContent: {
      template: '#main-template'
    }
  }
});

.sidebar {
  background-color: #fee;
  height: 100%;
  width: 150px;
  max-width: 1024px;
  opacity: 0.5;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

h1 {
  display: inline;
  height: 29px;
  width: 156px;
}

ul,
#sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  height: 20px;
  width: 200px;
  text-decoration: none;
  display: block;
}

.container-grid {
  background-color: #eef;
  margin-left: 180px;
}

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <sidebar></sidebar>
  <main-content></main-content>
</div>

<template id="sidebar-template">
<div>
<div class="sidebar">
  <div id="logo">
    <img src="" />
  </div>
  <h1><a href="#">Company</a></h1>
  <ul>
    <!--<li><a href="#">About</a></li>-->
    <!--<li><a href="#">Popular</a></li>-->
    <!--<li><a href="#">News</a></li>-->
    <!--<li><a href="#">Pages</a></li>-->
    <li><a href="#">Users</a>
      <ul id="sublist">
        <li><a href="#">Import</a></li>
        <li><a href="#">Invitations</a></li>
      </ul>
    </li>
    <!--<li><a href="#">Organisations</a></li>-->
    <li><a href="#">Polls</a></li>
  </ul>
 </div>
</div>
</template>

<template id="main-template">
<div class="container-grid">
  <div class="header">
    <h2>Users</h2>
    <button>Add</button>
    <h3>Import users</h3>
  </div>
 </div>
</template>