-2

I am trying to align my logo next to the h1, but the logo always goes above it. I'm a beginner to html and css. I tried all other answers in Stack Overflow. Here’s my code:

 <div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo">        <h1 class="text-light" ><a href="#intro" class="scrollto"><span><strong>GoStack</strong></span></a></h1>
 </div>
Jeffrey Lan
  • 90
  • 13
Rinith Binny
  • 7
  • 3
  • 2
    To solve this it would be helpful to have the CSS for float-left and other classes as well as screen shot and to note what browser this behavior is observed in. – Muskie Jan 06 '20 at 20:10

3 Answers3

1

You have not added the class (css) float left. I have added css here is the code

HTML

 <div class="cust-container">
<img src="img/gostack.png" id="yourlogo" alt="The only logo" class='iconDetails'>
    <h1 class="text-light" ><a href="#intro" class="scrollto"><span><strong>GoStack</strong></span></a></h1>
</div>

CSS

.cust-container {
width:100%;
height:auto;
padding:1%;
}

.iconDetails {
 margin-left:2%;
 float:left; 
 height:40px;
 width:40px;    
 } 

h1 {
  margin:0px;
}

Here is the link https://jsfiddle.net/Arpit09/fwxjvy1d/4/

Arpit Bhatia
  • 173
  • 1
  • 8
1

In HTML, block elements expand to fill all available horizontal space, forcing all other elements to flow either above or below the responsible element. To fix this, you can either change the display properties of your elements or use something like CSS Grid or Flex. I recommend just adding display: flex to your .logo class

.logo{
  display: flex;
}
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo"><h1 class="text-light" ><a href="#intro" class="scrollto"><span><strong>GoStack</strong></span></a></h1>
</div>
Libra
  • 2,544
  • 1
  • 8
  • 24
1

You can add a class "inline" in your h1 and add this CSS property to it:

.inline {
  display: inline;
}
<div class="logo float-left">
<img src="img/gostack.png" id="yourlogo" alt="The only logo">
<h1 class="text-light inline" ><a href="#intro" class="scrollto"><span><strong>GoStack</strong></span></a></h1>
 </div>
Shahril Ahmed Siddiquee
  • 26
  • 5