テキストが表示されない

前提・実現したいこと

monaca開発を勉強中です。
html cssが全くの初心者です。
ツールバーの下に、リストを表示したいのですがリストが被ってしまうのと、文字が表示されないです
ご教示いただければ助かります。

発生している問題・エラーメッセージ

該当のソースコード

!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>
<body>

  <!--ツールバー-->
  <ons-toolbar class="toolbar">
 <div class="center">テスト</div>
  </ons-toolbar>

<ons-list>
  <ons-list-header>Default</ons-list-header>
  <ons-list-item>item</ons-list-item>
  <ons-list-item>item</ons-list-item>
  <ons-list-item>item</ons-list-item>
  <ons-list-item>item</ons-list-item>
  <ons-list-item>item</ons-list-item>
  <ons-list-item>item</ons-list-item>
  <ons-list-item>item</ons-list-item>
</ons-list>



</body>
</html>