title: Aligning nav bar items, logo and image
body: <p>So I have a navbar that currently looks like this:</p>
  <p><a href="https://i.stack.imgur.com/cb9Nt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cb9Nt.png" alt="enter image description here" /></a></p>
  <p>I'm trying to change the position of the &quot;info&quot; icons so that they're slightly more down than now. Ideally something like 3-5 px more down.</p>
  <p>If I try to add like &quot;margin-top: 5px&quot; also the written come down with it, not solving my issues.</p>
  <p>This is my code:</p>
  <p>React Render:</p>
  <pre><code>        &lt;div className=&quot;toolbar&quot;&gt;
            &lt;div className = &quot;menu&quot;&gt;
            &lt;img className = &quot;logo&quot; src={logo} alt=&quot;logo&quot;onClick={refreshPage}/&gt;
              &lt;a className = &quot;buttons&quot; id = &quot;firstOne&quot; onClick={() =&gt; this.handleClick(&quot;bubbleSort&quot;)}&gt; Bubble Sort&lt;/a&gt;
              &lt;info className = &quot;info&quot; alt=&quot;info&quot;/&gt;
              &lt;a className = &quot;buttons&quot; onClick={() =&gt; this.handleClick(&quot;selectionSort&quot;)}&gt; Selection Sort &lt;/a&gt;
              &lt;info className = &quot;info&quot; alt=&quot;info&quot;/&gt;
              &lt;a className = &quot;buttons&quot; onClick={() =&gt; this.handleClick(&quot;insertionSort&quot;)}&gt; Insertion Sort &lt;/a&gt;
              &lt;info className = &quot;info&quot; alt=&quot;info&quot;/&gt;
              &lt;a className = &quot;buttons&quot; onClick={() =&gt; this.handleClick(&quot;quickSort&quot;)}&gt; Quick Sort &lt;/a&gt;
              &lt;info className = &quot;info&quot; alt=&quot;info&quot;/&gt;
              &lt;a className = &quot;buttons&quot; onClick={() =&gt; this.handleClick(&quot;mergeSort&quot;)}&gt; Merge Sort &lt;/a&gt;
              &lt;info className = &quot;info&quot; alt=&quot;info&quot;/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.toolbar {
    height: 67px;
    background-color: #303031;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0px 0px 40px -2px rgba(0,0,0,2);
    z-index: 2;
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .buttons{
    /* text */
    font-size: 16px;
    line-height: 3.14286;
    font-weight: 400;
    letter-spacing: -.01em;
    font-family: &quot;SF Pro Text&quot;,&quot;Myriad Set Pro&quot;,&quot;SF Pro Icons&quot;,&quot;Helvetica Neue&quot;,&quot;Helvetica&quot;,&quot;Arial&quot;,sans-serif;
    color: #9a9a95;
  
    /*position*/
    margin-right: 5px;
  }
  
  #firstOne {
    margin-left: 335px;
  }
  
  
  .info {
    width: 20px;
    height: 25px;
    background: url(&quot;info.png&quot;);
    margin-right: 100px;
    display: inline-block;
  }
  
  .logo {
    position: absolute;
    top: 50%;
    margin-top: -33px;
    margin-left: 20px;
  }
  </code></pre>
  <p>I know it's a long code and a confusing CSS. I'm new to CSS and HTML coding I'm sorry if it's bad. I'd appreciate some help. Thanks a lot</p>