title: CSS media query content changing its position
body: <p>so i have a little react todo app, in the phone or tablet or whatever device i want it to look the same i dont really know mediaqueries really good if its only case to fix it ? or are there any other ways? also i would be very happy to see media query solution too because i have no idea how to do it</p>
  <pre><code>import './App.css'
  import {useState,useEffect} from 'react'
  
  
  function App () {
  const[searchBar,setSearchBar] = useState('')
  const [todos,setTodos] = useState([])
  const [newTodo,  setNewTodo] = useState('')
  
  
  const handleChange = (e) =&gt;{
    setNewTodo(e.target.value)
  }
  
  const handleSubmit = (e) =&gt;{
      e.preventDefault()
  
      const adding = {
        task: newTodo,
        id:Math.floor(Math.random() * 100000),
        
  
      }
      if(newTodo.length){
      setTodos(todos.concat(adding))
      setNewTodo('')
      } 
  }
  
  const handleClick = (id) =&gt;{
  setTodos(todos.filter((event) =&gt;{
    return id !== event.id
  }))
  console.log(id)
  }
  
  
  const searchTodos = (e) =&gt;{
  setSearchBar(e.target.value)
  }
  
  
    return (
  &lt;div className='center'&gt;
    &lt;div className='header'&gt;
  
  &lt;div className='searchbar'&gt;
  
  &lt;h2&gt;Search ToDos&lt;/h2&gt;
  &lt;input type=&quot;text&quot; value={searchBar} onChange={searchTodos} name='search' /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div className='container-of-todos'&gt;
    &lt;h1 className='head'&gt;ToDos :&lt;/h1&gt;
   &lt;ul&gt;
     {todos
     .filter((val)=&gt;{
  if(searchBar===''){
    return  val
  } else if(val.task.toLowerCase().includes(searchBar.toLocaleLowerCase())) {
    return val
  
  }
     }).map((todo =&gt;{
       return(
         &lt;li key={todo.id}&gt;{todo.task}
        &lt;button className='button-9' onClick={() =&gt;handleClick(todo.id)}&gt;delete&lt;/button&gt;
         &lt;/li&gt;
         
       )
     }))}
   &lt;/ul&gt;
  
  &lt;/div&gt;
  &lt;form onSubmit={handleSubmit}  className='add'&gt; 
  &lt;h2&gt;Add ToDos&lt;/h2&gt;
    &lt;input  value={newTodo} onChange={handleChange} /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
    )
  }
  
  
  
  export default App
  </code></pre>
  <pre><code>@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&amp;display=swap');
  
  
  body{
    box-sizing: border-box;
    font-family: 'Roboto Condensed', sans-serif;
    background-color: #212D40;
    color: white;
  }
  .header{
    text-align: center;
  }
  .container-of-todos{
    background-color: #eee;
    width:500px;
    margin: 20px auto;
    border-radius: 6px;
  
  
  }
  ul{
     
    display: flex;
    justify-content: center;
    color: black;
    flex-direction: column;
    padding-left: 0pt;
    gap:5px;
   
   
  }
  li{
    width: 99%;
    list-style-type: none;
    border:2px solid #7a8391;
    background-color: #72a2f0;
    color: white;
    border-radius: 5px;
    display:flex;
    flex-direction: column;
    font-weight: 550;
    margin-bottom: 5px;
     
  }
  
  .delete{
  justify-self: center;
  align-self: flex-end;
  font-weight: 700;
  }
  
  .add{
    text-align: center;
  }
  .center{
    max-width: 960px;
    margin: auto;
  }
  .searchbar input{
  
  margin-left: 10px;
  }
  
  input{
    width: 500px;
    height: 24px;
    border-radius: 6px;
  }
  
  
  
  .button-9 {
    appearance: button;
    backface-visibility: hidden;
    background-color: #405cf5;
    border-radius: 6px;
    border-width: 0;
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: -apple-system,system-ui,&quot;Segoe UI&quot;,Roboto,&quot;Helvetica Neue&quot;,Ubuntu,sans-serif;
    outline: none;
    overflow: hidden;
    justify-self: flex-end;
    align-self: flex-end;
    text-align: center;
    text-transform: none;
    transform: translateZ(0);
    transition: all .2s,box-shadow .08s ease-in;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 50px;
  
  }
  
  .button-9:disabled {
    cursor: default;
  }
  
  .button-9:focus {
    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
  }
  
  .head{
    color: rgb(69, 127, 141);
    text-align:center;
  }
  ```*emphasized text*
  </code></pre>