html的li的表单以及背景如何平铺

问题遇到的现象和发生背景
问题相关代码，请勿粘贴截图
运行结果及报错内容
    <style>
        .box0{
            position: relative;
            background: url("../Steve/img/header_bg.jpg");
            border: 2px;
        }
        .box1{
            position: relative;
            background: url("../Steve/img/header_bg.jpg");
            border: 2px;
            top: 4px;
            display: inline-block;
            width: 600px;
            height: 100px;
        }
        a{
            text-decoration: none;
            color: white;
        }
        a:link{
            color: white;
        }
        ul{
            width: 100%;


        }
        li{
            list-style: none;
            color: white;
            display: block;
            float: left;
            display: flex;
        }
    </style>
</head>
<body>
    <div class="box0">
        <img src="../Steve/img/logo.jpg" alt="">

    </div>
    <div class="box1">
        <ul>
            <li><a href="#">首页&nbsp</a></li>
            <li><a href="#">信息公开指南&nbsp  </a></li>
            <li><a href="#">信息公开制度&nbsp  </a></li>
            <li><a href="#">年度报告 &nbsp </a></li>
            <li><a href="#">公开目录 &nbsp </a></li>
            <li><a href="#">公开申请表 &nbsp </a></li>
        </ul>
    </div>

目标效果

img

实际效果

img

img


使用flex布局，以下代码供你参考


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
    <style>
        html,body,ui{
            margin: 0 ;
            padding: 0;
        }
        .box0{
            position: relative;
            background: red;
            border: 2px;
        }
        .box1{
            position: relative;
            background:blue;
            border: 2px;
            top: 4px;
            display: inline-block;
            width: 100%;
            height: 100px;
        }
        a{
            text-decoration: none;
            color: white;
        }
        a:link{
            color: white;
        }
        ul{
            width: 100%;
            display: flex;
            height: 100px;
            align-items: center;
            margin: 0;
        }
        li{
            width: 300px;
            list-style: none;
            color: white;
        }
    </style>
</head>
<body>
<div class="box0">
<!--    <img src="../Steve/img/logo.jpg" alt="">-->

</div>
<div class="box1">
    <ul>
        <li><a href="#">首页&nbsp</a></li>
        <li><a href="#">信息公开指南&nbsp  </a></li>
        <li><a href="#">信息公开制度&nbsp  </a></li>
        <li><a href="#">年度报告 &nbsp </a></li>
        <li><a href="#">公开目录 &nbsp </a></li>
        <li><a href="#">公开申请表 &nbsp </a></li>
    </ul>
</div>

</body>
</html>

调整一下内外边距试试