diff --git a/src/render.tsx b/src/render.tsx
index c827c3f..4e06672 100644
--- a/src/render.tsx
+++ b/src/render.tsx
@@ -60,7 +60,7 @@ const convertEntities = (input: string) => {
 };
 
 export const isBlockStyle = (style: HtmlStyle) =>
-  ['block', 'flex'].includes(style.display);
+  style.display && ['block', 'flex'].includes(style.display);
 
 export const hasBlockContent = (element: HtmlElement | string): boolean => {
   if (typeof element === 'string') {
@@ -319,7 +319,14 @@ export const applyStylesheets = (
     .slice()
     .reverse()
     .forEach((stylesheet) => {
-      for (const selector of Object.keys(stylesheet)) {
+      const selectors = Object.keys(stylesheet).sort((a, b) => {
+        const aCompound = a.includes(' ');
+        const bCompound = b.includes(' ');
+        if (aCompound && !bCompound) return -1;
+        if (!aCompound && bCompound) return 1;
+        return 0;
+      });
+      for (const selector of selectors) {
         try {
           const elements = rootElement.querySelectorAll(
             selector
diff --git a/src/renderers.tsx b/src/renderers.tsx
index d9bd87e..3cdaf0d 100644
--- a/src/renderers.tsx
+++ b/src/renderers.tsx
@@ -221,7 +221,7 @@ const renderers: HtmlRenderers = {
     } else if (listStyleType.includes('url(')) {
       bullet = (
         <Image
-          src={listStyleType.match(/\((.*?)\)/)[1].replace(/(['"])/g, '')}
+          src={listStyleType.match(/\((.*?)\)/)?.[1]?.replace(/(['"])/g, '')}
         />
       );
     } else if (ordered) {
diff --git a/src/styles.ts b/src/styles.ts
index fe5d3ef..e754b09 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -3,13 +3,12 @@ import { Style } from '@react-pdf/types';
 import { Tag } from './tags.js';
 
 export type HtmlStyle =
-  | (Style & {
+  | Style & {
       listStyle?: string;
       listStyleType?: string;
       borderSpacing?: number | string;
       borderCollapse?: string;
-    })
-  | any;
+    };
 
 export type HtmlStyles = Record<Tag | string, HtmlStyle>;
 
@@ -111,18 +110,26 @@ export const createHtmlStylesheet = <T extends HtmlStyles>(
     li: {
       display: 'flex',
       flexDirection: 'row',
+      alignItems: 'flex-start',
     },
     li_bullet: {
-      width: 30,
+      width: 22,
+      minWidth: 22,
       textAlign: 'right',
       flexShrink: 0,
       flexGrow: 0,
-      paddingRight: 5,
+      paddingRight: 4,
     },
     li_content: {
       textAlign: 'left',
       flexGrow: 1,
-      flexBasis: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: 0,
+    },
+    'li p': {
+      marginTop: 0,
+      marginBottom: em(0.5),
     },
     table: {
       display: 'flex',
@@ -162,6 +169,7 @@ export const createHtmlStylesheet = <T extends HtmlStyles>(
       for (const style of Object.keys(base[key])) {
         if (
           !key.startsWith('li_') &&
+          key !== 'li p' &&
           (style.startsWith('margin') ||
             style.startsWith('padding') ||
             style === 'fontSize')