What's the best way to place the text nearby the logo in this case?-CodePudding

I want to place the text nearby the logo but justify-content: center; is making it more difficult, how can I move the text closer to the logo without having to use position: left/right ?

Using css-position will affect the responsiveness in the future ?

body {

    background: #19111d;
}

header {

    background: #8761b3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

img {

    width: 100px;
}

p {

    font-size: 30px;
}

nav ul {
    
    display: flex;
}

nav li {

    list-style: none;
    padding: 0px 20px;
}

<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <header>
            <img alt="logo" src="logo.png">
            <p>Random Text</p>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Home</li>
                    <li>Home</li>
                </ul>
            </nav>
        </header>
    </body>
</html>

CodePudding user response：

You can just remove the justify-content and add a margin-left: auto to the nav instead (to make it right aligned). That should make the text right next to the logo.

If you need to add some space between the logo and the text, just add a margin-right to the logo and add the space you need.

body {

    background: #19111d;
}

header {
    background: #8761b3;
    display: flex;
    align-items: center;
    /* Removed justify-content */
}

img {
    width: 100px;
    /* add margin-right to set distance between logo and text */
}

p {

    font-size: 30px;
}

/* Adding this will make the navigation right aligned */
nav {
    margin-left: auto;
}

nav ul {
    
    display: flex;
}

nav li {

    list-style: none;
    padding: 0px 20px;
}

<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <header>
            <img alt="logo" src="logo.png">
            <p>Random Text</p>
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Home</li>
                    <li>Home</li>
                </ul>
            </nav>
        </header>
    </body>
</html>

CodePudding user response：

.header-left {
   display:flex;
   align-items: center;
};

img {
  width: 100px;
}

body {
   background: #19111d;
}

header {
   background: #8761b3;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

nav ul {
   display: flex;
}

nav li {
   list-style: none;
   padding: 0px 20px;
}

 <header>
     <div >
        <img alt="logo" src="logo.png">
        <p>Random Text</p>
     </div>
    <nav>
        <ul>
            <li>Home</li>
            <li>Home</li>
            <li>Home</li>
        </ul>
    </nav>
</header>