why the button is not contained in the container?

September 26, 2022

I am trying to display the button in the bottom-right part of the container but it is shown outside of the container borders. Can someone help me to fix this?

<head>
    <title>title</title>

    <style>
        .container{
            border: 1px solid black;
        }

        .myButton{
            font-size: 20px;
            border: 2px solid red;
            float: right;
        }
    </style>
    
</head>
<body>
    <div class="container">
        <h1>title</h1>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi velit consectetur,
            rem autem pariatur magnam aliquid? Necessitatibus quia quae, earum voluptate sit
            nobis vel et repudiandae esse fugiat, nemo debitis.
        </p>
        <button class="myButton">button</button>
    </div>
</body>

>Solution :

When you used float: right the button went outside the flow of elements of the page. Try using flex instead.

<head>
    <title>title</title>

    <style>
        .container{
            border: 1px solid black;
        }

        .myButton{
            font-size: 20px;
            border: 2px solid red;
+           margin-right: 0;
+           margin-left: auto;
        }
+       .a{
+          display: flex;
+       }
    </style>
    
</head>
<body>
    <div class="container">
        <h1>title</h1>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi velit consectetur,
            rem autem pariatur magnam aliquid? Necessitatibus quia quae, earum voluptate sit
            nobis vel et repudiandae esse fugiat, nemo debitis.
        </p>
+     <div class="a">
+       <button class="myButton">button</button> 
+     </div>
        
    </div>
</body>