如何改变浏览器窗口尺寸后元素换行？

在实现导航栏时有这样一个需求:
左侧是一个logo，右侧是若干导航，要求两个在一行，右侧导航在除logo占得容器外居中。

出现的问题如下：

改变浏览器窗口大小后，后面居中的元素换行了。

错误情况如：

具体代码如下：

1. CSS:

    .container{
       min-width: 1002px;
       text-align: center;
   }
   .logo{
       width:300px;
       height:50px;
       float:left;
       background-color: red;
   }
   .nav{
       height:50px;
       width:800px;
       display: inline-block;
       background-color: blue;
   }

2. html:

   <div class="container">
       <div class="logo"></div>
       <div class="nav"></div>
   </div>
   
   

   这种情况应该如何实现？真实情况下这种需求该如何处理？

---

點進去試試

例子

.container{
    min-width: 1002px;
    text-align: center;
    display: flex; 
}

.logo {
    width:300px;
    background-color: red;
}

.nav{
    height: 60px;
    width: 800px;
    margin: 0 auto; /* <- 居中關鍵 */
    background-color: blue;
}