I attempted to align them in a single line, but they are not cooperating. The text floating to the left looks fine, however, the list that floats to the right is causing issues. I tried various methods to make them display inline, but they still appear slightly misaligned. Here's the HTML code snippet:
<header class="Header">
<div class="mainHeader">
<h1>Title</h1>
<h3>Subtitle</h3>
</div>
<div class="subHeader">
<ul>
<li>Phone</li>
<li><a href="#">Email</a></li>
<li>Address</li>
</ul>
</div>
</header>
Below are the CSS styles applied:
.Header{
background-color: #D5DBDB;
height: 80px;
padding: 2% 0%;
margin: 2% auto;
border-radius: 5px;
}
.mainHeader h1{
margin: 0 auto;
color: #E67E22;
}
.mainHeader h3{
text-align: left;
float: left;
}
.subHeader{
float: right;
text-align: right;
}
.subHeader ul{
list-style: none;
}