我怎样才能把这部分移到右边?

How can I move this part to the right?

我几乎是 HTML/CSS 的菜鸟,我一直在制作一个网站,并在末尾添加了一些带有图标的额外信息。问题是,当我尝试添加更多信息时,我希望它们彼此相邻显示,而不是彼此下方。关于如何做到这一点的任何想法?我希望你明白我的意思。如果没有,我会尝试进一步澄清问题。我用注释标记了它,这样您就知道我在说的是代码的哪一部分

* {
    font-family: "Roboto",sans-serif;
}

.navigation {
    background: rgb(241, 239, 239);
    opacity: 60%;
    margin-top: -17px;
    text-align: center;
    padding: 30px;
    position: relative;
}

li {
    display: inline;
}

.nav {
    text-decoration: none;
    color: black;
    padding: 15px;
    position: relative;
    left: 150px;
}

.nav:hover {
    color: orange;
}

#button:after {
    content: "START A PROJECT";
    position: relative;
    left: 150px;
    outline: 2px solid black;
    padding: 15px;
    padding-left: 50px;
    padding-right: 50px;
}

.navimg {
    width: 100px;
    margin-top: -100px;
}

.imgcontainer {
    margin-top: -10px;
    margin-left: 150px;
}

.mainlogo {
    background: url("../img/PC.jpg") 0px 0 no-repeat;
    width: 1745px;
    height: 700px;
    background-size: cover;
    position: relative;

}

.maintext {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    font-size: 40px;
}

.E {
    color: orange;
    display: inline;
}

.undertext {
    font-size: 30px;
    margin-top: -25px;
}

article {
    text-align: center;
}

.Hlavicka {
    font-size: 40px;
    font-weight: 300;
}

.text {
    font-weight: 300;
    margin-top: -20px;
}

.hviezda {
    margin-left: 470px;
    margin-top: 20px;
    width: 60px;
    height: 60px;
}

.Brigade {
    position: relative;
    left: 410px;
}

.hviezda2 {
    margin-top: -679px;
    margin-left: 500px;
}

#ziarovka {
    width: 70px;
    height: 70px;
}

.last {
    background: orange;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    padding: 20px;
    padding-left: 40px;
    padding-right: 40px;
}

.containter {
    text-align: center;
    margin-top: 120px;
}

.last:hover {
    background: rgb(243, 200, 119);
}
<!DOCTYPE html>
<html>
    <head>
        <title>Finalny pokus</title>
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    </head>

<body>      
    <header>
        <nav>
            <div class="navigation">
                <ul>
                    <li><a class="nav" href="#">WORK</a></li>
                    <li><a class="nav" href="#">ABOUT</a></li>
                    <li><a class="nav" href="#">SERVICES</a></li>
                    <li><a class="nav" href="#">RAILS</a></li>
                    <li><a class="nav" href="#">BLOG</a></li>
                    <li><a id="button" class="nav">CONTACT</a></li>
            </div>
            <div class="imgcontainer">
                <img class="navimg" src="img/littlelines.png">
            </div>
        </nav>
    </header>

    <main>
        <div class="mainlogo">
            <div class="maintext">
                <h1>We're a different kind of web design <br> <strong class="E">&</strong> development company.</h1>
                <h3 class="undertext">Above all, we believe in building exceptional products for our clients.</h3>
            </div>
        </div>
    </main>
    <section class="Undersection">
        <article>
            <h3 class="Hlavicka">What we're made of</h3>
            <p class="text">
            Nestled in the midwest, we have happy lcients from all over the world, from Amsterdam to Los Angeles, California. This <br> whole thing got started in 2007 and as 
            rewarding as our history has been, it's the future we're most excited about. Each <br> member of our team is here not only because they're ridiculously talented -- but because they love what they do.
            </p>
        </article>
    </section>
    <footer class="pata">
        
        <img class="hviezda" src="img/hviezda.PNG">
        <p class="Brigade">
            DAYTON RUBY BRIGADE <br> We established the Dayton Ruby community meet-up, <br> which is a group of programmerers, students, and technology <br>
            enthusiasts who are excited about the Ruby programming <br> language and the Ruby on Rails web framework. We <br> designed the community page for <strong class="E">daytonrb.com</strong> and host <br>
            the monthly gathering at our headquarters
        </p>
        <img class="hviezda" src="img/taska.PNG">
        <p class="Brigade">
            DAYTON CLEAN CODE <br> Dayton Clean Code is a meet-up that Littlelines helps host <br> once a month that provides an enviroment to teach, learn,<br> and experiment with software
            development patterns, <br> practises, and tools for creating high quality software.
        </p>
        <img class="hviezda" src="img/ziarovka.PNG">
        <p class="Brigade">
            OPEN HACK MEET UP <br>
            Open Hack is a meet-up with one purpose: code together, <br> on anything. Littlenes hosts this event on the first Thursday <br> of every month to get programmers of any experience level <br> together to code.
        </p>
        <aside>
            <!-- This is what I am trying to move to the right, it always displays under the elements above.-->
        <img class="hviezda" src="img/hviezda.PNG">
        <p class="Brigade">
            DAYTON RUBY BRIGADE <br> We established the Dayton Ruby community meet-up, <br> which is a group of programmerers, students, and technology <br>
            enthusiasts who are excited about the Ruby programming <br> language and the Ruby on Rails web framework. We <br> designed the community page for <strong class="E">daytonrb.com</strong> and host <br>
            the monthly gathering at our headquarters
        </p>
        <img class="hviezda" src="img/taska.PNG">
        <p class="Brigade">
            DAYTON CLEAN CODE <br> Dayton Clean Code is a meet-up that Littlelines helps host <br> once a month that provides an enviroment to teach, learn,<br> and experiment with software
            development patterns, <br> practises, and tools for creating high quality software.
        </p>
        <img class="hviezda" src="img/ziarovka.PNG">
        <p class="Brigade">
            OPEN HACK MEET UP <br>
            Open Hack is a meet-up with one purpose: code together, <br> on anything. Littlenes hosts this event on the first Thursday <br> of every month to get programmers of any experience level <br> together to code.
        </p>
    </aside>
    </div>
    <div class="containter">
    <a class="last" href="#">HAVE AN IDEA WE CAN HELP WITH?</a>
    </div>
</footer>
</body>

</html>

作为初学者,我建议你多学一些CSS,尤其是grids, flex。 至于这段代码,我想这对你有用。

  1. imgp 包装在包装器中。
  2. 给出 display: inline-blockverical-align: middle

JsFiddle code