I want to budge this border to the left like in the pic

Question

I want to budge this border to the left like in this image:

My code is like this:

div{
    border left: red 5px solid
}

Answer 1

I see what you want. So, first, you will need a class for your div, so that it doesn't affect every single div. You also need another <div> inside it for the text and the border. New code:

<div class="warn">
    <div class="inner-warn">This is important note</div>
</div>

Then, here comes the CSS. First, we should style the outer <div>. We will need padding, background color and you might want some border-radius. The padding should be around 7 pixels. Your background color can be something like #ddd. It is what I saw in your picture. Finally, the border radius can be 5 pixels, even though your image didn't contain any, I think it looks better. You can remove this. Our outer <div> code looks like this:

div.warn{
    padding: 7px;
    background-color: #ddd;
    border-radius: 5px;
}

Now we have the inner <div>. It should contain a red left border (as you said in your code) and some left padding to not "touch" the border. Our code is like this:

div.inner-warn{
    border-left: red 5px solid;
    padding-left: 5px;
}

Complete code:

<div class="warn">
    <div class="inner-warn">This is important note</div>
</div>
<style>
    div.warn{
        padding: 7px;
        background-color: #ddd;
        border-radius: 5px;
    }
    div.inner-warn{
        border-left: red 5px solid;
        padding-left: 5px;
    }
</style>

Snippet:

    div.warn{
        padding: 7px;
        background-color: #ddd;
        border-radius: 5px;
    }
    div.inner-warn{
        border-left: red 5px solid;
        padding-left: 5px;
    }

<div class="warn">
    <div class="inner-warn">This is important note</div>
</div>

It looks like this: