I'm working on a HTML script and when I do live server the HTM shows the list but without bullet points.

It sort of looks like paragraphs <p> right under each other and I don't know why they are not showing. It might to do with my CSS formatting, I am working with others, but I cannot see anything which would make this occur.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header li,
header a,
header button {
  text-decoration: none;
  color: black;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 24px;
}

header {
  display: flex;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid black;
}

.logo {
  cursor: pointer;
  height: 75px;
  width: auto;
}

.nav_links li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.nav_links li a:hover {
  color: #194569;
  text-decoration: underline;
}

header button {
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 25px;
  padding-right: 25px;
  border: none;
  border-radius: 50px;
  background-color: rgba(25, 69, 105, 1);
  color: whitesmoke;
}

.active {
  color: rgba(25, 69, 105, 1);
  text-decoration: underline;
}

button:hover {
  background-color: rgba(25, 69, 105, 0.8);
}

main {
  background-color: #e3dac9;
}

h1 {
  text-align: center;
}

#admin h1 {
  text-align: center;
  margin-bottom: 10px;
}

#admin h2 {
  margin-bottom: 10px;
}

#admin p {
  margin-bottom: 10px;
}

#admin ul {
  list-style-type: square;
  margin-left: 20px;
}

dl {
  margin: 0;
  padding: 0;

}

dt {
  font-weight: bold;
}

dd {
  margin-left: 20px;
}

#GroupPhoto {
  cursor: pointer;
  height: 300px;
  width: auto;
  display: block;
  margin: auto;
  border: inset 4px black;
}

footer {
  display: flex;
  flex-direction: column;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15px;
  padding-bottom: 15px;
  justify-content: space-between;
  background-color: black;
}

.footer_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer_links li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.footer_links a:hover {
  text-decoration: underline;
  color: #5fa4a2;
}

footer li,
footer a {
  text-decoration: none;
  color: whitesmoke;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 20px;
}

#groupMembers ul {
  list-style: disc;
}

footer p {
  align-self: center;
  text-decoration: none;
  color: whitesmoke;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  padding-top: 10px;
  font-size: 15px;
}

.jira_link {
  align-self: center;
  color: #5fa4a2;
  text-decoration: underline;
}

.jira_link:hover {
  align-self: center;
  color: #8fd4d1;
  text-decoration: underline;
}

<section id="GroupMembers">
  <h2> The Optional Group &copy; &nbsp; 2.30pm - 4.30pm Wednesday</h2>
  <ul>
    <li> Aldrin Filbert Maano: 105667785 </li>
    <li> Giuliano Zuccara: 105910780 </li>
    <li> Nikolas Popovic: 105920284 </li>
    <li> Oliver Scott: 105912692 </li>
  </ul>
</section>

I'm working on a HTML script and when I do live server the HTM shows the list but without bullet points.

It sort of looks like paragraphs <p> right under each other and I don't know why they are not showing. It might to do with my CSS formatting, I am working with others, but I cannot see anything which would make this occur.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header li,
header a,
header button {
  text-decoration: none;
  color: black;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 24px;
}

header {
  display: flex;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid black;
}

.logo {
  cursor: pointer;
  height: 75px;
  width: auto;
}

.nav_links li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.nav_links li a:hover {
  color: #194569;
  text-decoration: underline;
}

header button {
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 25px;
  padding-right: 25px;
  border: none;
  border-radius: 50px;
  background-color: rgba(25, 69, 105, 1);
  color: whitesmoke;
}

.active {
  color: rgba(25, 69, 105, 1);
  text-decoration: underline;
}

button:hover {
  background-color: rgba(25, 69, 105, 0.8);
}

main {
  background-color: #e3dac9;
}

h1 {
  text-align: center;
}

#admin h1 {
  text-align: center;
  margin-bottom: 10px;
}

#admin h2 {
  margin-bottom: 10px;
}

#admin p {
  margin-bottom: 10px;
}

#admin ul {
  list-style-type: square;
  margin-left: 20px;
}

dl {
  margin: 0;
  padding: 0;

}

dt {
  font-weight: bold;
}

dd {
  margin-left: 20px;
}

#GroupPhoto {
  cursor: pointer;
  height: 300px;
  width: auto;
  display: block;
  margin: auto;
  border: inset 4px black;
}

footer {
  display: flex;
  flex-direction: column;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 15px;
  padding-bottom: 15px;
  justify-content: space-between;
  background-color: black;
}

.footer_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer_links li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.footer_links a:hover {
  text-decoration: underline;
  color: #5fa4a2;
}

footer li,
footer a {
  text-decoration: none;
  color: whitesmoke;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 20px;
}

#groupMembers ul {
  list-style: disc;
}

footer p {
  align-self: center;
  text-decoration: none;
  color: whitesmoke;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  padding-top: 10px;
  font-size: 15px;
}

.jira_link {
  align-self: center;
  color: #5fa4a2;
  text-decoration: underline;
}

.jira_link:hover {
  align-self: center;
  color: #8fd4d1;
  text-decoration: underline;
}

<section id="GroupMembers">
  <h2> The Optional Group &copy; &nbsp; 2.30pm - 4.30pm Wednesday</h2>
  <ul>
    <li> Aldrin Filbert Maano: 105667785 </li>
    <li> Giuliano Zuccara: 105910780 </li>
    <li> Nikolas Popovic: 105920284 </li>
    <li> Oliver Scott: 105912692 </li>
  </ul>
</section>

• html
• css

• 1 Please provide a minimal reproducible example, emphasis on the minimal. You have a massive pile of CSS there and most of the selectors don't match any of the elements in your HTML! – Quentin Commented Apr 2 at 8:41
• 1 You eliminated all default margin and padding, so the bullet points get hidden outside the left of the viewport. You either need to give the UL a bit of padding-left, or set list-style-position: inside, instead of the default outside. – C3roe Commented Apr 2 at 8:44
• 2 TYPO id="GroupMembers vs. #groupMembers ul – Paulie_D Commented Apr 2 at 8:47
• 1 @Paulie_D — While that is a problem, it isn't the problem being asked about. Fixing that changes the symbol that we cannot see to a different symbol that we still cannot see. – Quentin Commented Apr 2 at 8:59

3 Answers 3

The default value for list-style-position is outside and you've set the left margin and padding of all your elements to zero.

Consequently the list marker is rendered to the left of the visible page.

Change the margin, padding or list-style-position.

Setting padding: 0; on all items, removes the default <ul> padding, so the bullets are rendered outside of the page.

I've added margin and outline on the <body>, and as you can see the bullets are outside of the body.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 2rem;
  outline: 2px solid green;
}

<section id="GroupMembers">
  <h2> The Optional Group &copy; &nbsp; 2.30pm - 4.30pm Wednesday</h2>
  <ul>
    <li> Aldrin Filbert Maano: 105667785 </li>
    <li> Giuliano Zuccara: 105910780 </li>
    <li> Nikolas Popovic: 105920284 </li>
    <li> Oliver Scott: 105912692 </li>
  </ul>
</section>

The simplest solution is to not use padding: 0; on all items.

However, if you must, you can use list-style-position: inside; on the <ul> to render the bullets inside the list items:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style-position: inside;
}

<section id="GroupMembers">
  <h2> The Optional Group &copy; &nbsp; 2.30pm - 4.30pm Wednesday</h2>
  <ul>
    <li> Aldrin Filbert Maano: 105667785 </li>
    <li> Giuliano Zuccara: 105910780 </li>
    <li> Nikolas Popovic: 105920284 </li>
    <li> Oliver Scott: 105912692 </li>
  </ul>
</section>

#GroupMembers ul { list-style: disc; }

your tag id different with css class id