bootstrap4のCDNを使用してVueコンポーネントを作成しているのですが、navbarのitemがVerticalとなってしまいます。下記ソースコードです。

【header.vue】

<template>
    <header class="row">
        <nav class="navbar navbar-toggleable-md navbar-light">
            <a class="navbar-brand" href="/">PIZZA PLANET</a>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="">home</a>                
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">menu</a>                
                </li>
            </ul>
        </nav>
    </header>
</template>

<style>
    header{
        margin-bottom: 20px;
    
    }

    .navbar-brand{
        font-size: 1.5em;        
    }



</style>

【index.html】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Pizza Planet</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but pizza-planet doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

cssでfloatなど試しましたが、横並びにできませんでした。