Making banner above nav bar using CSS and HTML with logo/icon floated left of text

I’m having issues trying to create a “banner” above the navigation bar on my website using CSS/HTML.

I can’t get a background color to display in the banner, and I also can’t manage to get the header text to float to the right of the banner logo/icon. Here is my code so far for both HTML header and CSS.

HTML:

<header>

     <link href="index.css" rel="stylesheet">

<div class="banner">
    <img src="logo.png" class="profile-picture" alt="Header Logo">
    <h1 class="title">Header info 1</h1>
    <h2 class="title">Header info 2</h2>
    <h3 class="title">Header info 3</h3>
</div>

<nav>
    <! --this part works fine so code omitted -->
</nav>

</header>

Here is the CSS:

.header img{
   float: left;
}
.header .banner{
   display:inline-block;
   *display:inline;
   padding: 20px;
   background-color: #5C5F58;
   margin:10px;

}
.header .banner .title{
   display:inline-block;
   *display:inline;
   font-family: 'Bebas Neue', sans-serif; 
   color: #ffffff; 
   text-transform: uppercase;
}

So a summary of the problems I’m having:

  • I can’t get the logo to float to the left of the title headings (they appear underneath the logo)
  • I can’t get the background color of the banner to change
  • I can’t get the font style or font color to change

I know it’s probably the way I’m referring to these elements in the CSS, but I can’t figure out how to refer to them properly.

Thanks in advance for your help

Answer

I can’t get the logo to float to the left of the title headings (they appear underneath the logo)

You give 1 sibling inside .banner float and the other one is not floating. This will make them overlap. Give either none or both of them float.

I can’t get the background color of the banner to change

Use the background-color css-property.

I can’t get the font style or font color to change

Change the .header into header in your css. The first one is targeting the class header and the latter one targets the header html-tag.

Pro tip: try using an online code editor with HTML and CSS like Codepen to ask your questions. This will make it easier for people to try and answer your questions resulting in faster and more elaborate answers.