イメージが横並びにならない

<!doctype html>
<head> <link rel="stylesheet" type="text/css" href="a.css"></head>
<body>
    <header>
        <div class="left"><img src="./image/b.jpg"></div>
        <div class="right">
            <ul>
                <li>Home</li>
                <li>Acess</li>
                <li>Contact</li>
            </ul>
        </div>
    </header>
    <main>
        <h1>Cola</h3>
            <div class="iamge">
            <ul>
                <li><img src="./image/one.jpg"></li>
                <li><img src="./image/two.jpg"></li>
                <li><img src="./image/three.jpg"></li>
            </ul>
            </div>
    </main>
</body>
</html>

header {
    background-image:url("./image/a.jpg");
    width:100%;
    height:350px;
    display:flex;
    justify-content:space-between;
}

.left img {
    width:250px;
    height:50px;
    margin-left:50px;
    margin-top:30px;
}

.right {
    margin-top:10px;
    ul {
    display:flex;
    list-style:none;
    margin-right:50px;
    li {
        margin-right:25px;
        color:red;
        font-size:30px;
    }}
}

main h1 {
    text-align:center;
    color:blue;
    margin-top:50px;
    margin-bottom:50px;
}

.image {
    ul{
    display:flex;
    justify-content:space-around;
    li {
       margin:0 auto;
       img {
        width:300px;
        height:300px;
       }
    }
}
}

imageクラスの画像が大きくて縦に並んでいます。
これをちょうど良いサイズで、横並びにするには、どうすれば良いでしょうか？
あと、listy-style:none;を指定しているのにマークが取れていません。
これをどうすれば、良いでしょうか？