body {
  background-image: url("static.jpg");
}

h1 {
  color:#bf0001;
  font-size: 2.5em;
  background: black;
}
.title {
  text-align: center;
  border: solid;
}

.navbar ul{
  list-style-type:none;
  background-color:black;
  padding:0px;
  margin: 0px;
  overflow: hidden;
}
.navbar a{
  color: #bf0001;
  text-decoration: none;
  padding: 15px;
  display: block;
  text-align: center;
}

.navbar a:hover{
   background-color:#343434;
}

.navbar li{
 float:left;
 
}
 
 .city1 {
  position: relative;
  right: 20px;
}

.container {
  display: flex;
  /* Optional: Add space between items */
  justify-content: space-around; /* or space-between, center, etc. */
  /* Optional: Ensure equal height columns */
  align-items: stretch; /* default value, but good to know */
  /* Optional: Add a consistent gap */
  gap: 20px;
}
.item {
  flex: 1; /* Optional: Distribute available space equally */

}