Container problem in html and css

Question

I don’t have much knowledge in html or css.

When I minimize the screen or change the resolution, the container does not follow the same pattern. As follows:

Maximized:

Minimized:

Why is this happening and what is the best way to correct it? Thanks for your attention.

follows how it is in css:

#containerForm{
  float: right;     
  width: 1050px;  
  background: tomato;
}

I put this red background just to enhance the visualization

Html snippet:

    <div id="containerForm">     
        <form action="." method="POST">            
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Simular</button>
        </form>
    </div>

Answer 1

My opinion

The problem

you are using fixed measures , then whenever the screen change it will still occupy the position that was etabelecida

How to solve?

My advice is to use flex-box plus relative measures(%) Changes the percentage value of width until

Code

CSS

#containerForm{
  float: right;     
  width: 60%;  
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: tomato;
}

If you don’t solve your problem feel free to share your static version of the code on https://jsfiddle.net/ so I can help in real time.