Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

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

Remove List Style Type

CSS

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

List Style Inside

(it looks like outside is the default?)

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

CSS

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

Zeroed no bullets

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;
}