Проблема с перенесением изображения

Question

Возникла проблема во время создания страницы. Я новичок в создании html и css документов.

Проблема заключается в том, что я хочу вставить картинку рядом с текстом. Вот сам мой макет в пеинте: [ Сама картинка

По моей задумке весь текст будет центрированным, а сама картинка будет как дополнение, будет правее абзаца. (ну или текст будет обтекать слева вокруг картинки, главное, чтобы картинка и текст были центрированными) А что у меня получается в итоге:

Ну или вообще картинка уходит в правый бок страницы. Если же я её начну двигать, то и сам текст начнёт вместе с ней уходить.

Сам код:

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тестовый сайт</title>
    <link href="navigation.css" rel="stylesheet">
    <link href="portfolio.css" rel="stylesheet">
    <link href="social_media.css" rel="stylesheet">
</head>
<body>
<nav class="navigation">
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>
<div style="padding-left: 20px; text-align: center;">
    <div class="about_me">
        <h1>Обо мне</h1>
        <div class="about_me">
            <p>
                <img src="https://sun9-59.userapi.com/impf/lmBOCJuBwhQlK7nax01sYRvQiJ6o8veoDCWd5A/Wd5SZNNupRo.jpg?size=640x566&quality=95&sign=458865f44cfb7cf5a53c27250a9dae8e&type=album"
                     width="150" height="150" style="float: right;">
                ТестТестТестТестТестТестТестТестТестТестТестТестТестТест
            </p>
        </div>
    </div>
    <div class="portfolio" style="margin-top: 150px">
        <h1>Портфолио</h1>
        <ul>
            <li>
                <p>Тест</p>
                <img src="https://gamebomb.ru/files/galleries/001/7/79/88796.jpg" width="250" height="250">
                <br>
                <a href="">Перейти</a>
            </li>
            <li>
                <p>Тест2</p>
                <img src="https://gamebomb.ru/files/galleries/001/7/79/88796.jpg" width="250" height="250">
                <br>
                <a href="">Перейти</a>
            </li>
        </ul>
    </div>
    <div class="social_media">
        <h1>Социальные сети</h1>
        <ul>
            <li><a href="">Вконтакте</a></li>
            <li><a href="">Дискорд</a></li>
            <li><a href="">GitHub</a></li>
        </ul>
    </div>
</div>
</body>
</html>

P.S. я новичок в вебе, поэтому много чего могу не понимать в вёрстке)

БЛОГ НА HUSL

Проблема с перенесением изображения

Ответы (0 шт):