I am pretty much a noob to HTML/CSS, I've been making a website and added some extra information to the end with icons. The problem is that when I try to add more information, I want them to display next to eachother, not under eachother. Any idea on how to do that? I hope you understand what I mean.. If not, i'll try to clarify the problem more. I've marked it with a comment tag so that you know which part of the code I am talking about
* {
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>As for a beginner, I would recommend you to learn some more CSS, especially grids, flex.
As for this code, I think this will do for you.
img and p within a wrapper.display: inline-block and verical-align: middle