[Duda] eliminar las viñetas de las listas | Flexbox: Posicione elementos en la pantalla | Alura Latam

Buenos días compañeros, esta es mi respuesta al pequeño desafío propuesto:

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

.logo {
    margin-left: 50px;
}

.menu {
    display: flex;
}

.menu-item {
    margin: 10px 20px;
}

mi pregunta es: ¿Cómo hago para quitarle el punto que trae los elementos de la lista por defecto y que solo salga el texto?

aquí el html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mini Alura | Cursos online</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="flexbox.css">
</head>
<header class="encabezado">
    <a class="logo" href="#">
        <img src="img/logo.png">
    </a>
    <ul class="menu">
        <li class="menu-item">Item 1 del menu</li>
        <li class="menu-item">Item 2 del menu</li>
        <li class="menu-item">Item 3 del menu</li>
        <li class="menu-item">Item 4 del menu</li>
    </ul>
</header>