Spacing ul And li Elements In CSS

This is the way I set up a list where the disc markers are inside the main bounding box and the text wrappers underneath itself inside of the disc marker

No Styles

Alfa Bravo Charlie
Hang tinsel from both branches. Heave the line over the port side. Help the weak to preserve their strength.

Remove List Style Type

Delta Echo Foxtrot
Send the stuff in a thick paper bag. Set the piece here and say nothing.

CSS

#remove_list_style_type {
  > ul {
      list-style: none;
    }
}

List Style Inside

(it looks like outside is the default?)

Send the stuff in a thick paper bag. Set the piece here and say nothing.
Delta Echo Foxtrot

CSS

#inside_style {
  > ul {
    list-style: inside;
  }
}

Zeroing UL margin and padding

If markers/bullets are set to "outside" which I think is the default, they'll be outside the < ul > area. You could move them back in with [TODO: Code shorthand span ] or remove them with [TODO: Code shorthand span ] ;

Send the stuff in a thick paper bag. Set the piece here and say nothing.
Delta Echo Foxtrot

CSS

#zero_margin_pad {
  > ul {
    padding-left: 0;
    margin-left: 0;
  }
}

Zeroed no bullets

Send the stuff in a thick paper bag. Set the piece here and say nothing.
Delta Echo Foxtrot

CSS

#zeroed_no_bullets {
  > ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
  }
}

Base Styles For This Page

This page is designed to make what's happening with the css as clear as possible. To help with that, there are no other positioning styles on this page other than those above and this set here :

CSS

*, *::before, *::after {
  box-sizing: border-box;
}  

* {
  margin: 0;
}

.example {
  width: min(100% - 4rem, 50ch);
  margin-top: 2rem;
  margin-bottom: 2rem;
  background-color: #211;
}

.h2Section {
  border-top: 1px solid blue;
  padding-top: 0.7rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.htmlSection {
  padding-left: 2rem;
}