<br> tags are not making new lines

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">
            <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>

.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;


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

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

“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-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>.

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?

The elements should be staked.

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

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.