Lost in CSS for a motto

[Artha]

I am fighting with only my limited understanding of CSS by trying to get into an EPUB a page roughly as painted by the rectangles in the attached PDF (I would have preffered SVG, but I see that's impossible for mobileread).

The Heading is done. Also the main body of text. The motto is all right as long as it does not lead to having an itemised list. At that point the alignment switch from right to left goes beserk.

The motto goes as a DL with the body as DD and the signature as DT, which in my version of CSS goes like this:

dl {
  font-size: 0.9em;
  text-align: right;
  margin: 1em 2em 3em;
}

dt {
  font-weight: bold;
}

So far so good. It works. Now, if I go for an unordered list preceded by a line of text as in:

Breakfast will provide:
* tea
* warm water
* orange juice

With the following CSS:

#list {
  text-align: left;
  list-style-position: inside;
  padding: 0;
  margin: 0;
}

And the implementation:

 <dl>
    <dd>
      Breakfast:

      <ul id="list">
        <li>tea</li>

        <li>water</li>

        <li>more tea</li>
      </ul>
    </dd>
  </dl>

I get a mess. I'm quite sure it obvious to you so probably someone could shed some light or a link to some simple tutorial.

This is the compromise solution which lets the list left align with the heading and the body instead of having the bullets way to the left side while the items were right and the undescribable line wrapping.

In the end I let ADE be the judge as I get different results in different apps.

[Artha]

Solved: must have been more clear restricting the DL block on all sides. Gives it a cleaner look with longer lines too.