Please change your li class=”home” to li.home you should use dot(.) in class not word class.
li.home {
text-align: left;
}
Please change your li class=”home” to li.home you should use dot(.) in class not word class.
li.home {
text-align: left;
}
You can do like this.
html
<div>
<ul>
<li class="home">Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
</ul>
<h1>Company</h1>
</div>
css
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: right;
}
li class="home" {
text-align: left;
}
li {
display: inline-block;
margin: 10px;
}
h1 {
margin: 0;
}
div {
display: flex
}
if you wanna show logo on the left side, use html like this.
<div>
<h1>Company</h1>
<ul>
<li class="home">Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
and if you wanna show logo on left side and menu on right side use this in div
div {
display: flex;
justify-content: space-between;
}
let me know if you have any issue.
test it:
ul {
display: inline;
}
li.home {
text-align: left;
}
li {
display: inline-block;
margin: 10px;
}
h1.header{
display: inline;
}
<ul>
<li class="home">Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
</ul>
<h1 class="header">Company</h1>
Just use float for align elements , https://jsfiddle.net/pc4kayrx/
<header>
<ul>
<li class="home">Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
</ul>
<h1>Company</h1>
</header>
<style>
ul {
float:right;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: right;
}
li {
display: inline-block;
margin: 10px;
}
</style>
I have a ul for website navigation and a header, I want them next to each other but one is on top. I tried making home a specific class and to align it right but I couldn’t get it to work.
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: right;
}
li class="home" {
text-align: left;
}
li {
display: inline-block;
margin: 10px;
}
<ul>
<li class="home">Home</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
</ul>
<h1>Company</h1>
The li class="home"
was my attempt to align it left
I want the company to be next to the ul, but aligned left
I have searched different options on Google, but none seem to work. How can i resolve my issue?