mic*_*ich 3 html layout tailwind-css
我试图让按钮顺风延伸到屏幕上，但要么它们向左对齐并且不延伸（大多数情况下），要么 - 正如代码的当前状态，它们似乎从右手延伸屏幕的一侧！
我确信我错过了一些明显的东西，但看不出它是什么。我的页眉和页脚适当拉伸，最初我只是复制它们，但作为buttons，而不是divs。
代码（超出屏幕版本）目前如下所示：
<body>
...
<div class="">
<div class="block">
<ul class="">
<li><button class="w-full bg-orange-200 hover:bg-orange-400 rounded-lg mx-6 my-4">
<div class="text-black text-lg content-center">
<h2 class="font-bold">Mike's big adventure</h2><br>
<div class="text-black text-base">Aargh, zombies!</div>
<div class="text-gray-600 text-xs">
<div>Created: 2020-03-24T12:57:01.753Z</div>
<div>Updated: 2020-03-24T13:00:06.411Z</div>
</div>
</div>
</button></li>
... more list items
</ul>
</div>
</div>
...
（注意，不要认为这有什么区别，但 html 实际上是由 Elm SPA 生成的）
我需要如何嵌套各种container、w-full、等w-screen，button以及我需要什么组合才能得到我想要的东西？
编辑：这个片段并不是唯一没有拉伸的东西。例如，页眉也没有。页脚附着在屏幕底部，但一直延伸......
标题：
<div class="container flex-auto w-screen m-2">
<div class="w-full content-center bg-orange-500 rounded-lg">
<h1 class="font-bold text-5xl text-center">Header</h1>
</div>
</div>
页脚：
<div class="container flex-auto w-screen mx-2">
<div class="absolute inset-x-0 bottom-0 bg-orange-500 rounded-lg m-2">
<div class="m-4">Footer</div>
</div>
</div>