请问我哪出了问题要怎么改，改了多遍都达不到想要的效果

图1是我做的图2是我想达到的效果，可是出了点问题，

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">
    <title>illustratortitle>
    <style type="text/css">
        body h2{ margin: 0 auto;
             margin-top: 10px;
             width: 56.25rem;
             height: auto;
             border-radius: 12px;
             text-align: center;
             color: black;
        }
      span{display: inline-block;
        margin: 1px 15px 5px 15px;
        font-size: 20px;
        }
        p{
            color:#5e2d00;
        }
        strong:hover  {
            color: red;
        }
        a{
            text-decoration: none;
        }
        img{
            border-radius: 11px;
            box-shadow: 1px 5px 5px 5px 1px #cccccc;
        }
        dl{
            margin: 0 auto;
            width: 775px;
            font-size: 23px;
            text-decoration: none;
            text-align: center;
        }
        dt{
            margin-top: 2px;
            float: left;
        }

    style>
head>
<body>
   <a href="pagel.html"><h2>网页设计软件列表（点击查看）h2>a> 
   <hr width="800px" size="5px" color="#5e2d00">
   <span>
    <span><a href="page2.html"><p><strong>Photoshop软件strong>p>a>
    span>
   <span>
    <a href="page3.html"><p><strong>illustrator软件strong>p>a>
   span>
   <span>>
    <a href="page4.html"><p><strong>Dreamweaver软件strong>p>a>
   span>
   <span>
    <a href="page5.html"><p><strong>firework软件strong>p>a>
   span>
   <hr width="800px" size="5px" color="#5e2d00">
   <img src="C:\Users\asus\Desktop\a9c6383ba37286481e43e08ac4ff215.jpg">
   <dl>
    <dt><img src="C:\Users\asus\Desktop\de828a9e8dacf57b2963038fe3287ae.jpg">Illustrator是一种用于出版,多媒体和在线图像的<font size="" color="#FF0000">标准矢量插画font>的软件。dt>
    <dt><img src="C:\Users\asus\Desktop\de828a9e8dacf57b2963038fe3287ae.jpg"><font size="" color="#e0ba93"><b>Illustrator广泛应用于b>font><font size="" color="#5E2D00"><b>印刷出版，海报书籍，b>font><font size="" color="#e0ba93">专业插画，多媒体图像处理。font>dt>
    <dt><img src="C:\Users\asus\Desktop\de828a9e8dacf57b2963038fe3287ae.jpg">Illustrator可以为线稿提供较高的精度和控制，简单到复杂的项目都能产生。dt>
    <dt><img src="C:\Users\asus\Desktop\de828a9e8dacf57b2963038fe3287ae.jpg">根据不完全统计全球大约有37%的界面设计师在使用Illustrator进行设计。font>dt>
    dl>
body>
html>

img

img


body{text-align: center;}