title: How to put brand name just to the right of logo in html?
body: <p>I am making a webpage and i want that the name of the brand should appear right next to the brand logo, just to the right of the brand logo. I have tried using the float-left property but nothing is doing good.</p>
  <p>I have provided both the html as well as css sheet, plz someone help. And if possible try to fix this without using flex-box.</p>
  <p>Here's my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-size: 16px;
    background-color: #61122f;
    font-family: 'Oxygen', sans-serif;
  }
  
  #header-nav {
    background-color: gold;
  }
  
  #logo-img {
    background: url("BurgerKING1.png") no-repeat;
    width: 152px;
    height: 152px;
    margin: 10px 15px 10px 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;DEV RESTAURANT TESTING&lt;/title&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
    &lt;!-- Bootstrap CSS --&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="testing.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,900;1,900&amp;display=swap" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;header&gt;
      &lt;nav id="header-nav" class="navbar navbar-default"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;a href="testing.html" class="float-left"&gt;
              &lt;div id="logo-img" alt="logo image"&gt;&lt;/div&gt;
            &lt;/a&gt;
            &lt;div class="navbar-brand "&gt;
              &lt;a href="testing.html"&gt;
                &lt;h1&gt;Burger King&lt;/h1&gt;
              &lt;/a&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  
    &lt;!-- Optional JavaScript --&gt;
    &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>