diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index 8e8a6c83..b7b41e7b 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -19,7 +19,7 @@ function CourseBreadcrumb({
   return (
     <>
       {withSeparator && (
-        <li className="mx-2 text-primary-500 text-truncate text-nowrap" role="presentation" aria-hidden>/</li>
+        <li className="col-auto p-0 mx-2 text-primary-500 text-truncate text-nowrap" role="presentation" aria-hidden>/</li>
       )}
 
       <li style={{
@@ -124,7 +124,7 @@ export default function CourseBreadcrumbs({
   return (
     <nav aria-label="breadcrumb" className="my-4 d-inline-block col-sm-10">
       <ol className="list-unstyled d-flex  flex-nowrap align-items-center m-0">
-        <li className="list-unstyled d-flex m-0">
+        <li className="list-unstyled col-auto m-0 p-0">
           <a
             href={`/course/${courseId}/home`}
             className="flex-shrink-0 text-primary"