How to align text in CSS?


I’m making a website with HTML and CSS and I need to align the menu bar text to the right hand side. However, I have added text-align: right; but it’s not doing anything. Could someone please help me out with this? Thank you. Here is my code:

<!DOCTYPE html>
<html><html lang="en">
<meta charset="UTF-8">
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;

			background-color: #333;
			overflow: hidden;


		.menubar a

			float: left;
			color: #ffffff;
			text-align: right;
			padding: 30px 30px;
			text-decoration: none;
			font-size: 20px;



	<div class="header">

		<h1 style="color:#ffffff;"><center>Crystal Pendants</center></h1>

		<body style="background-color:#6495ED">



<div class="menubar">


				<li><a href="default.asp">Home</a></li>
				<li><a href="products.asp">Products</a></li>
				<li><a href="contact.asp">Contact</a></li>
				<li><a href="about.asp">About</a></li>





Welcome to the forum @krys98

Try float right.

Happy coding


This did not work, all it did was mix up the order. For example: About Contact Products Home

You need to add position property with value absolute and right property with the value 0 to your Targeted selector menubar.

Hi @krys98

The float: right property and styling will reverse the order of the list items.

Here’s another way. I removed the unordered list and list items from your code.

Happy coding