Why isn’t my SVG going to the left of my text when I use text-align: left on it?

I’m creating a basic weather app using HTML CSS and JS, and right now I’m working on the CSS of the program. I’m using SVGs for the icons since I think it looks nicer and you have more control over them. This is my current issue:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  background: #222;
}

.container {
  width: 90%;
  max-width: fit-content;
  background: linear-gradient(135deg, #00feba, #5b548a);
  color: white;
  margin: 100px auto 0;
  border-radius: 20px;
  padding: 40px 35px;
  text-align: center;
}

.search {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search input {
  border: 0;
  outline: 0;
  background: #ebfffc;
  color: #555;
  padding: 10px 25px;
  height: 60px;
  border-radius: 30px;
  flex: 1;
  margin-right: 16px;
  font-size: 18px;
}

.search button {
  border: 0;
  outline: 0;
  background: #ebfffc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.weather h1 {
  font-size: 80px;
  font-weight: 500;
}

.weather h2 {
  font-size: 45px;
  font-weight: 400;
  margin-top: -10px;
}

.details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 50px;
}

.col {
  display: flex;
  align-items: center;
  text-align: left;
}

.col svg {
  width: 50px;
  margin-right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="search">
      <input type="text" placeholder="enter city name" spellcheck="false">
      <button><svg viewBox="0 0 24.00 24.00" width="40px" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></button>
    </div>
    <div class="weather">
      <h1 class="temp"></h1>
      <h2 class="city"></h2>
      <div class="details">
        <div class="col">
          <div>
            <svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M12,22c2.579,0,4-1.35,4-3.8,0-3.243-3.237-5.871-3.375-5.981a1,1,0,0,0-1.25,0C11.237,12.329,8,14.957,8,18.2,8,20.65,9.421,22,12,22Zm0-7.639A6.153,6.153,0,0,1,14,18.2c0,1.112-.335,1.8-2,1.8s-2-.688-2-1.8A6.153,6.153,0,0,1,12,14.361ZM6.625,2.219a1,1,0,0,0-1.25,0C5.237,2.329,2,4.957,2,8.2,2,10.65,3.421,12,6,12s4-1.35,4-3.8C10,4.957,6.763,2.329,6.625,2.219ZM6,10c-1.665,0-2-.688-2-1.8A6.153,6.153,0,0,1,6,4.361,6.153,6.153,0,0,1,8,8.2C8,9.312,7.665,10,6,10ZM18.625,2.219a1,1,0,0,0-1.25,0C17.237,2.329,14,4.957,14,8.2c0,2.45,1.421,3.8,4,3.8s4-1.35,4-3.8C22,4.957,18.763,2.329,18.625,2.219ZM18,10c-1.665,0-2-.688-2-1.8a6.153,6.153,0,0,1,2-3.839A6.153,6.153,0,0,1,20,8.2C20,9.312,19.665,10,18,10Z"></path></g></svg>
            <p class="humidity">50</p>
            <p>Humidity</p>
          </div>
        </div>
        <div class="col">
          <div>
            <svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M14.993 2.99997C14.4439 2.99621 14 2.54995 14 1.99999C14 1.46184 14.467 0.998406 15.0045 1C15.6705 1.00699 16.3542 1.18404 16.9472 1.48057C17.4408 1.72738 17.9649 2.11331 18.3633 2.71092C18.7659 3.31479 19 4.07501 19 4.99999C19 5.92498 18.7659 6.6852 18.3633 7.28907C17.9649 7.88668 17.4408 8.27261 16.9472 8.51942C16.3562 8.81492 15.6671 8.998 15.0021 8.99999L9 8.99999C8.44772 8.99999 8 8.55228 8 7.99999C8 7.44771 8.44772 6.99999 9 6.99999L15.0004 6.99982C15.3603 6.98783 15.7318 6.89107 16.0528 6.73057C16.3092 6.60238 16.5351 6.42581 16.6992 6.17967C16.8591 5.93979 17 5.57501 17 4.99999C17 4.42498 16.8591 4.0602 16.6992 3.82032C16.5351 3.57418 16.3092 3.39761 16.0528 3.26942C15.7302 3.10814 15.3553 3.00987 14.993 2.99997Z" fill="white"></path> <path d="M2 7C1.44772 7 1 7.44772 1 8C1 8.55228 1.44772 9 2 9H6C6.55228 9 7 8.55228 7 8C7 7.44772 6.55228 7 6 7H2Z" fill="white"></path> <path d="M2 11C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H12C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11H2Z" fill="white"></path> <path d="M2 15C1.44772 15 1 15.4477 1 16C1 16.5523 1.44772 17 2 17H5C5.55228 17 6 16.5523 6 16C6 15.4477 5.55228 15 5 15H2Z" fill="white"></path> <path d="M18 18C18 17.4501 18.4439 17.0038 18.993 17C19.3553 16.9901 19.7302 16.8919 20.0528 16.7306C20.3092 16.6024 20.5351 16.4258 20.6992 16.1797C20.8591 15.9398 21 15.575 21 15C21 14.425 20.8591 14.0602 20.6992 13.8203C20.5351 13.5742 20.3092 13.3976 20.0528 13.2694C19.7318 13.1089 19.3603 13.0122 19.0004 13.0002L15 13C14.4477 13 14 12.5523 14 12C14 11.4477 14.4477 11 15 11L19.0021 11C19.6671 11.002 20.3562 11.1851 20.9472 11.4806C21.4408 11.7274 21.9649 12.1133 22.3633 12.7109C22.7659 13.3148 23 14.075 23 15C23 15.925 22.7659 16.6852 22.3633 17.2891C21.9649 17.8867 21.4408 18.2726 20.9472 18.5194C20.3542 18.816 19.6705 18.993 19.0045 19C18.467 19.0016 18 18.5382 18 18Z" fill="white"></path> <path d="M11.993 21C11.4439 21.0038 11 21.4501 11 22C11 22.5382 11.467 23.0016 12.0045 23C12.6705 22.993 13.3542 22.816 13.9472 22.5194C14.4408 22.2726 14.9649 21.8867 15.3633 21.2891C15.7659 20.6852 16 19.925 16 19C16 18.075 15.7659 17.3148 15.3633 16.7109C14.9649 16.1133 14.4408 15.7274 13.9472 15.4806C13.3562 15.1851 12.6671 15.002 12.0021 15L8 15C7.44772 15 7 15.4477 7 16C7 16.5523 7.44772 17 8 17L12.0004 17.0002C12.3603 17.0122 12.7318 17.1089 13.0528 17.2694C13.3092 17.3976 13.5351 17.5742 13.6992 17.8203C13.8591 18.0602 14 18.425 14 19C14 19.575 13.8591 19.9398 13.6992 20.1797C13.5351 20.4258 13.3092 20.6024 13.0528 20.7306C12.7302 20.8919 12.3553 20.9901 11.993 21Z" fill="white"></path> </g></svg>
            <p class="wind">12</p>
            <p>Wind Speed</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

When I use text-align: left; on .col svg {} I the svg doesn’t go to the left. I’m not sure if I’m missing something here.

Filed under: Kiến thức lập trình - @ 18:25

Thẻ: htmlcsssvg

Thiết kế website giá rẻ

Danh mục

Why isn’t my SVG going to the left of my text when I use text-align: left on it?