Robie taką stronę internetową https://www.w3schools.com/w3css/tryw3css_templates_gourmet_catering.htm i mam problem aby ustawić tekst obok obrazu. Jestem początkujący i używam display:inline-block
tu jest kod html
<!DOCTYPE HTML>
<html lang="pl">
<head>
<link rel="Stylesheet" type="text/css" href="style.css">
<title>Projekt catering</title>
<meta charset="utf-8">
<meta name="keywords" content="strona, projekt, catering">
<meta name="description" content="Pierwsza strona. Catering">
<meta name="robots" content="all">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="author" content="piotr">
<meta name="generator" content="brackets">
</head>
<body>
<nav class="navigation">
<ul class="list">
<li class="item"><a href="#logo">Gourmet au Catering</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<header class="banner">
<div class="image-banner">
<h1>Le Catering</h1>
</div>
</header>
<main class="container">
<section class="catering">
<div class="image-catering">
<img src="https://www.w3schools.com/w3images/tablesetting2.jpg" alt="dessert">
</div>
<div class="text-catering">
<h2>About Catering</h2>
<p>Tradition since 1889</p>
<p class="catering-description">
The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use <span class="special">seasonal</span> ingredients.
</p>
<p class="catering-description color-gray">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</section>
<section class="our-menu">
<h2>Our Menu</h2>
<div class="food-offer">
<p>Bread Basket</p>
<p>Assortment of fresh baked fruit breads and muffins 5.50</p>
</div>
<div class="food-offer">
<p>Honey Almond Granola with Fruits</p>
<p>Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p>
</div>
<div class="food-offer">
<p>Belgian Waffle</p>
<p>Vanilla flavored batter with malted flour 7.50</p>
</div>
<div class="food-offer">
<p>Scrambled eggs</p>
<p>Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p>
</div>
<div class="food-offer">
<p>Blueberry Pancakes</p>
<p>With syrup, butter and lots of berries 8.50</p>
</div>
<div class="image-menu">
<img src="https://www.w3schools.com/w3images/tablesetting.jpg" alt="dinner">
</div>
</section>
<section class="contact">
<h2>Contact</h2>
<p class="contact-desc">
We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste. Do not hesitate to contact us.
</p>
<p class="contact-desc color-green">
Catering Service, 42nd Living St, 43043 New York, NY
</p>
<p class="contact-desc">
You can also contact us by phone 00553123-2323 or email [email protected], or you can send us a message here:
</p>
<div class="contact-form">
<form action="#" method="post">
<input type="text" placeholder="Name">
<input type="number" placeholder="How many people">
<input type="datetime-local" value="2017-11-16T20:00">
<input type="text" placeholder="Message \ Special requirements">
<button type="submit">Send Message</button>
</form>
</div>
</section>
</main>
<footer class="foot-content">
<p class="foot-info">Powered by<a href="https://www.w3.org">w3.css</a></p>
</footer>
</body>
</html>
```html
a tu CSS
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navigation
{
height: 70px;
max-height: 20vh;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.navigation .list
{
text-align: right;
margin: 0 30px;
}
.navigation li
{
display: inline-block;
font-size: 0;
}
.list > .item
{
margin-right: 600px;
}
.navigation a
{
display: block;
padding: 10px;
margin: 15px auto;
font-size: 15px;
color: black;
text-decoration: none;
letter-spacing: 5px;
}
.navigation a:hover
{
background-color: #ccc;
}
.banner
{
max-width: 100%;
}
.banner .image-banner
{
background-image: url('https://www.w3schools.com/w3images/hamburger.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.banner h1
{
margin: 5px auto;
padding-top: 650px;
padding-left: 25px;
font-size: 36px;
padding-bottom: 50px;
font-weight: 400;
letter-spacing: 5px;
}
.container
{
max-width: 1400px;
}
.catering
{
max-width: 1200px;
margin: 70px auto;
font-size: 0;
}
.image-catering
{
width: 50%;
}
.text-catering
{
width: 50%;
font-size: 18px;
vertical-align: middle;
}
.image-catering > .text-catering
{
display: inline-block;
}