<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/mdn/css-examples/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 0;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From 09e7107c70b202cf3546bdadff0580fc20407f43 Mon Sep 17 00:00:00 2001
From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Tue, 4 Jul 2023 15:42:09 +0530
Subject: [PATCH] fix: use `gap` instead of margin for flex navigation

---
 flexbox/use-cases/split-navigation.html | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html
index 71718440..55a9c90c 100644
--- a/flexbox/use-cases/split-navigation.html
+++ b/flexbox/use-cases/split-navigation.html
@@ -79,15 +79,12 @@
   </style>
   <style class="editable">

     nav ul {
-        display: flex;
-        margin: 0 -10px;
-      }
-    nav li {
-        margin: 0 10px;
+      display: flex;
+      gap: 20px;
+    }
+    .push-right {
+      margin-left: auto;
     }
-      .push-right {
-          margin-left: auto;
-      }
   </style>
 </head>
 
@@ -107,11 +104,7 @@
   <textarea class="playable-css"> nav ul {
   display: flex;
-  margin: 0 -10px;
-}
-
-nav li {
-  margin: 0 10px;
+  gap: 20px;
 }
 
 .push-right {
</textarea>