a left padding appears in crhomium when using flex; but not in firefox

By -

i am using Manjaro as an OS so i don't know about Chrome. i have this issue where a padding appears on the left after using flexbox, this issue only happened in Chromium and not in firefox.

i don't know where the problem is (as i don't know if there's any problem with the code at all apart from accessibility and responsivenss but this is because i didn't finish coding yet)

this is my html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="./styles.css" />

    <title>Frontend Mentor | Stats preview card component</title>
  </head>
  <body>
    <main class="container">
      <div class="hero-image">
        <img src="./images/image-header-desktop.jpg" alt="" srcset="" />
      </div>
      <div class="content">
        <div class="main-header">
          Get <span>insights</span> that help your business grow.
        </div>
        <div>
          Discover the benefits of data analytics and make better decisions
          regarding revenue, customer experience, and overall efficiency.
        </div>
        <div>
          <div>
            <div>10k+</div>
            <div>companies</div>
          </div>
          <div>
            <div>314</div>
            <div>templates</div>
          </div>
          <div>
            <div>12m+</div>
            <div>queries</div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

this is the CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(233, 47%, 7%);
  font-size: 15px;
}

.container {
  background-color: hsl(244, 38%, 16%);
  display: flex;
  flex-direction: row-reverse;
}

.main-header {
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

span {
  color: hsl(277, 64%, 61%);
}
.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

ps: this is a frontendMentor challenge!



from Recent Questions - Stack Overflow https://ift.tt/3Hbi18q
https://ift.tt/eA8V8J

Comments

Post a Comment

Popular posts from this blog

Spring Elasticsearch Operations

By -
Elasticsearch Operations Spring Data Elasticsearch uses two interfaces to define the operations that can be called against an Elasticsearch index. These are ElasticsearchOperations and ReactiveElasticsearchOperations. Whereas the first is used with the classic synchronous implementations, the second one uses reactive infrastructure. The default implementations of the interfaces offer: Read/Write mapping support for domain types. A rich query and criteria api. Resource management and Exception translation. ElasticsearchTemplate The ElasticsearchTemplate is an implementation of the ElasticsearchOperations interface using the Transport Client. @Configuration public class TransportClientConfig extends ElasticsearchConfigurationSupport {   @Bean   public Client elasticsearchClient() throws UnknownHostException {                      Settings settings = Settings.builder().put("cluster.name", "elasticsearch")....
Read more

Object oriented programming concepts (OOPs)

By -
Object-oriented programming (OOP) is a programming paradigm based on the concept of "objects". Re-usability is the main concept of Oops. There are few major principles of object-oriented paradigm. If any programming Language supports this principles that programming language called Object-oriented programming. Below are object oriented programming concepts : 1. Object        Read More about Object     http://theprogrammersfirst.blogspot.in/2016/07/java-object-concept.html
Read more

Spring Webflux : How to return HTTP 200 response with body when the called service returns HTTP 201 without body with WebClient?

By -
I have a micro service(Java+Spring Boot) which receives HTTP request, and then I invoke a REST API call over HTTP to another service. The called service returns HTTP status 201(no response body), but I need to return HTTP 200 with response body. I am using WebClient to call the other service and for 201 status I am using bodyToMono(Void.class) So how do I return HTTP 200 response body for the clients of my microservice? Whats the best practice? Also how to write a Component Test for the service which is invoking the external service which returns HTTP 201? Thanks from Recent Questions - Stack Overflow https://ift.tt/2WMuAVd https://ift.tt/eA8V8J
Read more