I need to display the text saying NAME to the left and the list to the right next to each other.
body {
font-family: nunito;
}
.mainmaneheader {
float: left;
position: relative;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.purplebox {
background-color: #ba68c8;
}
<header>
<h1 class="mainnameheader">NAME</h1>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</header>
*I am aware that this is a common issue but after looking around I cannot find the answer.
Try and give the header display: flex; and a height so you can set a line-height and align the text nice! After that, you can give the ul width: 100%; so it takes up the entire width as it is allowed! Then you can give the ul a text-align: right so it stays on the right!
* {
margin: 0;
padding: 0;
}
header {
display: flex;
height: 50px;
line-height: 50px;
padding: 20px;
background-color: #fff1cc;
}
ul {
padding: 0;
margin: 0;
width: 100%;
text-align: right;
}
li {
list-style: none;
display: inline;
}
<header>
<h1 class="mainmaneheader">NAME</h1>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</header>
I did changes in "header, ul and li".
body {
font-family: nunito;
}
header{
display: flex;
align-items: center;
}
ul {
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.purplebox {
background-color: #ba68c8;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With