How to align two divs next to each other without clashing together? - html

Question

I trying to create a header of a website, with the logo and name positioned on the left side and the tabs at the center. i have two divs the first holding the logo and the name and the other the tabs(lists). But they are not aligned on horizontally together rather than one div is below the other. I have used float but it doesn't seem to work as i would like as other divs and elements clash with floated divs. I do know a similar question has been asked but they don't work for me.
.header {
width: 100%;
border: solid red;
}
#trademark {
border: solid green;
width: 15%;
}
#logo {
width: 70px;
}
#logoName {
float: right;
}
#divList {
border: solid black;
width: 50%;
text-align: center;
margin-left: 25%;
}
#list li {
display: inline;
margin: 20px;
}
<div class="header">
<div id="trademark">
<img src="images/coin.png" id="logo">
<h2 id="logoName">Halo</h2>
</div>
<div id="divList">
<ul id="list">
<li>About</li>
<li>TCH</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>
no errors how not being formatted as needed

Answer 1

try this
.header {
width: 100%;
border: solid red;
}
#trademark {
border: solid green;
width: 20%;
display: flex;
}
#logo {
width: 70px;
}
#logoName {
float: right;
}
#divList {
border: solid black;
width: 50%;
text-align: center;
margin-left: 25%;
}
#list li {
display: inline;
margin: 20px;
}
<div class="header">
<div id="trademark">
<div class="icon">
<img src="images/coin.png" id="logo">
</div>
<h2 id="logoName">Halo</h2>
</div>
<div id="divList">
<ul id="list">
<li>About</li>
<li>TCH</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>
</div>