<br> tags are not making new lines

[CodeingMAN]

When I try to do a <br> tag in my .box1 div it does not work on the outside of the box1 div it works. Is there any problem?

<div class="box1">
        <img src="\jwcodeme\assets\code_man_ban1.gif" width="50%" style="float: left;" alt="coding img unavailable or failed to load">
        <span>
            <h1>Fast, Efficient, and Secure</h1>
       <!-- Working On be tag fix --> 
           <br />
            <br />
       <!-- Working On be tag fix -->
            <p>My serveces are 90% <em>fast, efficient, and secure</em>
                the work we do should be good in all ways.</p>
        </span>
    </div>

.box1 {

    background-color: Rgb(255, 106, 0, 0.7);

    font-family: Consolas, 'Courier New', monospace;

    display: flex;

    align-items: center;

}

.box1 span {

    display: flex;

    margin: auto;

    margin-top: 0; 

}

.box1 p {

   font-family: Arial;

}

[jlmacle]

That might be because of the inline nature of <span>.

[CodeingMAN]

kinda confused what is a inline nature is it the display: flex; ?

[Jagaya]

“inline” means a <span> is meant to be in one line, it’s usually used to wrap words or phrases in paragraphs to add a special styling to those. You used it to wrap several other tags.
Other tags like <h1> are not inline, as it will automatically write it’s content on it’s own line, for example the following html written in one line, will produce three lines:
<p>paragraph</p> <h5> header </h5> <p> some more <span> text </span> </p>

p-paragraph

h5-header

p-some more text with span

The problem is the display: flex, as this means all contained elements should be flexed to be on aligned in a certain way. In this case, they are aligned in one line which and will ignore any <br>.

[lasjorg]

You don’t want, nor need them. Just adjust the margin on the elements.

Also, the elements are inside a flexbox container using the default row direction so using a <br> tag really doesn’t make much sense.

Are you trying to create horizontal or vertical space? Should the elements be stacked or be side by side?

[CodeingMAN]

The elements should be staked.

[lasjorg]

Then the span needs to have flex-direction: column.