title: Angular putting two components side by side
body: <p>I know this question has been asked before, but none of the solutions I have found have worked for me yet.</p>
  <p>Basically, I have two components (a side nav bar and the router-outlet for the main content). I want them to be side by side, but something always goes wrong.</p>
  <p>If I use container-fluid, they overlap and the router outlet doesn't reach the right edge.</p>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ei4TR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ei4TR.png" alt="container-fluid" /></a></p>
  <p>If I use regular container, they do not overlap, but the main content is even further from the right edge.</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>OR</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/4loSJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4loSJ.png" alt="Container" /></a></p>
  <p>If I try to add columns, they become even more congested</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col&quot;&gt;
              &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/UKIA0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UKIA0.png" alt="row with col" /></a></p>
  <p>If I don't use a container at all, the main content touches the right side, but they overlap again.</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
  </code></pre>
  <p>OR</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/CUJ0J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CUJ0J.png" alt="no container" /></a></p>
  <p>I'll stop adding pictures, but I've tried many other methods and tried using CSS. My point is I keep running into at least one thing not displaying the way I want it to. I'm still an amateur so any advice is appreciated, thanks.</p>
  <p>(Some things I tried in CSS: flex, float, left: 0 , right: 0, width: 100.5%, padding: 0, overflow-x: hidden, margin: 0)</p>
  <p>Also, this is the CSS for the sidebar:</p>
  <pre><code>.sidebar{
      width: 200px;
      position: absolute;
      left: 0; top: 76px;
      min-height: 100%;
      background-color: azure;
      border-right: 10px solid lightblue;
  }
  </code></pre>