How to adjust margins creating a Dashboard with css and Bootstrap

Question

I am creating an admin Dashboard with Bootstrap but I can't get the margins of the sidebar and the main panel to work correctly. Is hardcoding the margins in a .css file the way this is normally done? For example, once I have the top bar, should I use margin-top for the sidebar on the left with the value of the top-bar height?

The reason I'm asking is that if I margin-top the main panel with the same value, which is reasonable, the sidebar is also dropping even more. Also, I'm not sure how to set the margin on the left of the main panel. Styling is driving crazy.

Here's a picture of what I just said.

.sidebar {
  position: absolute;
  height: 100%;
  margin-top: 55.6px;
}

.options-container {
  margin-top: 56px;
  margin-left: 780px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />


<main role="main" class="container container-fluid options-container bg-light">
  <div class="row">
    <div class="option col-sm-3">
      <div class="card card-block bg-light">
        <h4>Add Player</h4>
      </div>
    </div>
    <div class="option col-sm-3">
      <div class="card card-block bg-secondary">
        <h4>Add Team</h4>
      </div>
    </div>
    <div class="option col-sm-3">
      <div class="card card-block bg-warning">
        <h4>Add Competition</h4>
      </div>
    </div>
    <div class="option col-sm-3">
      <div class="card card-block bg-danger">
        <h4>Add Referee</h4>
      </div>
    </div>
    <div class="option col-sm-3">
      <div class="card card-block bg-info">
        <h4>Add Stadium</h4>
      </div>
    </div>
  </div>
</main>

<nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div class="list-group">
    <h5 class="players-title">Players</h5>
    <label class="player-item" *ngFor="let player of players" (click)="onSelect(player)">
          <span class="badge">{{player.id}}</span> {{player.name}}
          <app-player-detail [player]="selectedPlayer"></app-player-detail>
        </label>
  </div>
</nav>

Answer 1

Ok so you have a lot of work to do to rebuild this as there's a few issues, you didn't give me all your styling so I made my own:

* {
  padding: 0px;
  margin: 0px;
}

.sidebar {
    height:100vh;
    display:inline-block;
    float:left;
    background: green;
    padding: 20px;
   margin-right: 20px;
   width: 20%;
}

.options-container {
  width: 72%;
   display:inline-block;
  margin-top: 20px;
}

.option {
  display: inline-block;
  margin-right: 10px;
}

.card {
  background: yellow;
  padding: 10px 20px;
  border-radius: 20px;
}

.card h4 {
  line-height: 20px;
  font-size: 16px;
  margin: 0px;
}

<div class="container">
    <main role="main" class="container container-fluid options-container bg-light">
      <div class="row">
        <div class="option col-sm-3">
            <div class="card card-block bg-light">
                <h4>Add Player</h4>
            </div>
        </div>
        <div class="option col-sm-3">
          <div class="card card-block bg-secondary">
            <h4>Add Team</h4>
          </div>
        </div>
        <div class="option col-sm-3">
            <div class="card card-block bg-warning">
                <h4>Add Competition</h4>
            </div>
        </div>
        <div class="option col-sm-3">
            <div class="card card-block bg-danger">
                <h4>Add Referee</h4>
            </div>
        </div>
        <div class="option col-sm-3">
            <div class="card card-block bg-info">
                <h4>Add Stadium</h4>
            </div>
        </div>
      </div>
</main>

<nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div class="list-group">
    <h5 class="players-title">Players</h5>
        <label class="player-item" *ngFor="let player of players" click)="onSelect(player)">
          <span class="badge">{{player.id}}</span> {{player.name}}
          <app-player-detail [player]="selectedPlayer"></app-player-detail>
        </label>
      </div>
    </nav>
</div>

Here's a working codepen: https://codepen.io/danielvickerssa/pen/rvWvaO

By all means this isn't perfect like you should use flexbox for sizing etc. however this solves the issue you had.