Navbar lo go не будет работать в CSS, но будет работать в HTML

Question

Пытаюсь вписать изображение в панель навигации, которую я использую. Я не могу заставить его работать в CSS, но я могу заставить его работать в HTML. Я не хочу стилизовать lo go в HTML, только в CSS. Изображение "RPGWizards.jp" Это html

 <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" id="logo" href="#"><img src="Assets/RPGWizards.jpg"></a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="AboutUs.html">About Us</a></li>
        <li><a href="Contact.html">Contact Us</a></li>
        <li><a href="OurProducts.html">Our Products</a></li>
      </ul>
    </div>
  </nav>  

Это CSS

#logo{
    width= 42px ;
    height= 42px;
    }

/ NTqjn. JPG

Answer 1

Вы использовали неправильный синтаксис для width: 48px;, между двоеточием не стоит = символ.

У класса nav-brand есть отступ, и вам нужно сделать это для 0 и поместите его в блок.

Просмотр в полноэкранном режиме для визуализации.

a#logo.navbar-brand {
  padding: 0;
}

#logo img {
  width: 48px;
  height: 51px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" id="logo" href="#"><img src="http://placekitten.com/301/301"></a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a href="AboutUs.html">About Us</a></li>
      <li><a href="Contact.html">Contact Us</a></li>
      <li><a href="OurProducts.html">Our Products</a></li>
    </ul>
  </div>
</nav>