How to align right ?

[MarcusE1W]

Hi. I am very new to this whole CSS subject and so maybe this is a very stupid question.
How do I align text, or anything to the right side?

I have this example:

<header class="container-fluid">
  <a href="#">
  <span class="w3-left">
	JANET'S CAFE BLOG
  </span>
  </a>
  <a href="javascript:void(0)" class="w3-right w3-button " onclick="w3_open()">☰</a>
</header>

This has started from a W3School template and I try to translate this to PicoCSS.
How do I get this line to align right in PicoCSS?

  <a href="javascript:void(0)" class="w3-right w3-button " onclick="w3_open()">☰</a>

I scanned the pico.css file and I feel I am missing something.
Is there a very different way of doing things with pico.css compared to this example with w3.css ?
But my question is general, how do I align text or buttons or anything to the right ?

[ouvreboite]

It seems you are trying to create a top menu of some sort ?

Then you could use the nav

<nav>
  <ul>
    <li><a href="#" ></li>
    <li>JANET’S CAFE BLOG</li>
  </ul>
  <ul>
    <li><button>☰</button></li>
  </ul>
</nav>

For the JavaScript part you’ll need to improvise because there is no « hamburger menu » in picocss.

[MarcusE1W]

Thank you, for nav I guessed so much. The example was maybe slightly misleading. The javascript part is actually only to animate a sidebar in and out. Basically to set the sidebar to block or none. Not that important.

My question was more about any other objects, like text or so. Or I want all Headlines to be right aligned, something like that.
Let's say for example I have two lines of text and want one to be left and the other to be right aligned:

<p> Some text left aligned </p>
<p> Some other text right aligned </p>

I guess left aligned is standard, but how would I align the text to the right ?

Or do I not get how to work with PicoCSS ?

[dev-willis]

You can align any text to the right simply by setting text-align: right; in your CSS file. In some cases you may also need margin-left: auto; or justify-content: flex-end;. Pico provides a very nice set of defaults but you'll still need to add custom CSS for specific use cases.

Also, just FYI, W3 Schools is a notoriously unreliable place to get information. I would recommend sites like css-tricks.com, developer.mozilla.org, web.dev/learn/css/, or pretty much anything that isn't W3 Schools.