Align bullet and ul text

HTML-CSS
1

Hello, I am trying to figure out how to get the ul text to align with the bullet point. Thank you in advance!

<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
  <head>
  </head>
  <body>
    <main id="main-doc">
      <section class="main-section" id="Tokage">
        <header>
          <p><code>Tokage</code></p>
        </header>
         <p>A dinosaur that pretends to be a lizard.</p>
         <li>
           <ul>My current favorite character</ul>
          
          </li>
      </section>
       <section class="main-section" id="Mudkip">
          <header>
            <p><code>Mudkip</code></p>         
          </header>
             <p>My first starter Pokemon</p>
             <li>
               <ul>Small plushie on my mic</ul>
              </li>
      </section>
       <section class="main-section" id="Snorunt">
          <header>
            <p><code>Snorunt</code></p>
          </header>
          <p>The Pokemon I painted the most.</p>
           <li>
             <ul>Watercolor painted</ul>
          </li>
      </section>
       <section class="main-section" id="Lotad">
          <header>
            <p><code>Lotad</code></p>
          </header>
              <p>The Pokemon I used to impersonate.</p>
               <li>
                 <ul>I would not do the voice impersonation now</ul>
               </li>
      </section>
       <section class="main-section" id="Gudetama">
          <header>
            <p><code>Gudetama</code></p>
          </header>
              <p>A lazy egg - like me.</p>
               <li>
                 <ul>My favorite character a few years ago</ul>
               </li>
      </section>
    </main>
    <nav id="navbar">
      <header class="navbar_header">
        Jump to each character
      </header>
      <a class="nav-link" href="#Tokage">Tokage</a>
      <a class="nav-link" href="#Mudkip">Mudkip</a>
      <a class="nav-link" href="#Snorunt">Snorunt</a>
      <a class="nav-link" href="#Lotad">Lotad</a>
      <a class="nav-link" href="#Gudetama">Gudetama</a>
    </nav>
  </body> 
</html> 

<--!CSS-->

@media screen and (min-width: 480px) {
  body {
    background-color: lightblue;
  }

  navbar {
    justify-content: left;
    position: absolute
  }
}

header:not(.navbar_header) {
  font-weight: bold;
  font-size: 24px;
  color: white;
  text-align: center;
}

section {
  font-size: 18px;
  color: darkblue;
  text-align: center;
}
2

The List Item element

List CSS

here is some docs…

1 Like
3

Welcome to the community @mochi-mimi !

Could you pleaase give more details on the this?

I see there is not a complete basic boiler plate, which is the starting point.

another option for the bullet tags, if you do not want them, is to use css styling to remove them

I am including a link to help you, that I hope will get you on the way.

It is found in fCC News Category, which is accessible through the menu, and through the search at the top of the page.

As well, here is one that discusses ul list in it.

1 Like