# CSS Problem body width

**URL:** <https://forum.freecodecamp.org/t/css-problem-body-width/376582>\
**Category:** General\
**Created:** [April 21, 2020, 7:21am UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582 "2020-04-21T07:21:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shubham10200](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shubham10200/32/141623_2.png) [@Shubham10200](https://forum.freecodecamp.org/u/Shubham10200)\
**Post date:** [April 21, 2020, 7:21am UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582/1 "2020-04-21T07:21:55Z")

</div>

![Screenshot from 2020-04-21 12-49-17](https://global.discourse-cdn.com/freecodecamp/original/3X/f/0/f082f8428112b2c97a357cb57b5b8707a4a0dc28.png)

Body width is 299px when I inspect it … but actually it is 150 px . What’s wrong ?

Why body element is not taking all the width?

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [April 21, 2020, 9:06am UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582/2 "2020-04-21T09:06:59Z")

</div>

Hello there,

We cannot help much with a screenshot.

While we are primarily here to help people with their **Free Code Camp** progress, we are open to people on other paths, too. _Some_ of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at [https://www.freecodecamp.org/learn](https://www.freecodecamp.org/learn).

It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding 🙂

---

<div class="post-metadata">

**Author:** ![Shubham10200](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shubham10200/32/141623_2.png) [@Shubham10200](https://forum.freecodecamp.org/u/Shubham10200)\
**Post date:** [April 21, 2020, 3:08pm UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582/3 "2020-04-21T15:08:15Z")

</div>

My CSS code working differently in chrome and firefox. I don’t know exactly what and where the problem is ☹ . I’m trying to make a portfolio page, I’ve made a pretty good section of it so far , but now it’s time for media queries , it’s working differently in firefox and chrome . In chrome , when I’m reducing the width of widow below 400px using device toolbar, body element gets shrink , I don’t know why . As far as I know body’s width is always equal to the max -size of window . It’s not shrinking in chrome .  
I’ve been messing with it since last 6-7 hours …still not getting where and what the problem is. I don’t know how to explain my problem.

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [April 21, 2020, 3:47pm UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582/4 "2020-04-21T15:47:45Z")

</div>

> [@Sky020](#):
>
> It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

It is **very** difficult to debug someone else’s code, if they do not provide it…

---

<div class="post-metadata">

**Author:** ![Shubham10200](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shubham10200/32/141623_2.png) [@Shubham10200](https://forum.freecodecamp.org/u/Shubham10200)\
**Post date:** [April 22, 2020, 12:19am UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582/5 "2020-04-22T00:19:19Z")

</div>

I’m making a portfolio page. I’m attaching my codes of particular section. Everything is working fine so far , the problem here is when I am decreasing the width of my window using chrome dev tool’s device toolbar, the width of `body` element gets shrinked, it’s not 100% width anymore , so everything gets shrinked so style gets bad. This behaviour is not with firefox. SO what’s the problem?

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shubham Porfolio</title>
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>

<body>
    <header class="header">
        <div class="header-wrap">
            <img src="https://i.ibb.co/FsCtFBx/logo.png" alt="shubham">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="intro">
        <img src="https://i.ibb.co/FsCtFBx/logo.png">
        <h1>Hi, I am <strong>Bert Baxter</strong></h1>
        <p class="sub-heading">
            front-end-dev
        </p>
    </section>
</html>
<style>
:root {
  --main-color: rgb(0, 237, 189);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: poppins;
}
/ ************************************************** /
.header {
  position: fixed;
  background: white;
  width: 100%;
  z-index: 3;
  top: 0;
}
header .header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: auto;
}
header img {
  height: 80px;
}
header ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  height: 70%;
  align-items: center;
}
header nav {
  flex-basis: 50%;
  align-self: stretch;
  display: flex;
  align-items: center;
}
header a {
  text-decoration: none;
  color: black;
}
header li {
  transition: transform, border-bottom, 200ms;
}
header li:hover {
  border-bottom: 3px solid var(--main-color);
  transform: translateY(-5px);
  cursor: pointer;
}

@media (max-width: 700px) {
  header nav {
    display: none;
  }
  header img {
    margin: auto;
  }
}

/ ****************************************************************** /
/ ********************INTRO_SECTION******************************** /

section.intro {
  display: grid;
  grid-column-gap: 1em;
  width: min-content;
  margin: auto;
  grid-template-columns: min-content max-content;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "image heading"
    "image sub-heading";
  padding-top: 120px;
}
section.intro img {
  display: block;
  width: 280px;
  grid-area: image;
  z-index: 2;
  box-shadow: 0 0 10px grey, 0 0 12px grey;
}
section.intro h1 {
  grid-area: heading;
  font-weight: 100;
  font-size: 2.5em;
}
section.intro p {
  grid-area: sub-heading;
  font-size: 1.5em;
  background: var(--main-color);
  height: min-content;
  grid-column: 1/3;
  text-align: right;
  position: relative;
  left: -2em;
  width: calc(100% + 2em);
  padding-right: 1em;
}
section.intro strong {
  display: block;
}

@media (max-width: 500px){
  section.intro{
    width: 95%;
    display: flex;
    flex-flow: column wrap;
    padding-top: 100px;
  }
  section.intro img{
    order: 3;
    width: 90%;
    min-width: 275px;
  }
  section.intro h1{
     
    
  }
  section.intro p{
    width: 90%;
    position: unset;
    text-align: left;
    padding-left: 20px;
    min-width: 275px;
    margin-top: 20px;
    margin-bottom: 20px;
    
  }
}
</style>

```

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [April 22, 2020, 10:12am UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582/6 "2020-04-22T10:12:24Z")

</div>

Unfortunately, I am unable to replicate the issue with that code. Everything is working the way I would expect it to.

---

<div class="post-metadata">

**Author:** ![Shubham10200](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shubham10200/32/141623_2.png) [@Shubham10200](https://forum.freecodecamp.org/u/Shubham10200)\
**Post date:** [April 22, 2020, 10:20pm UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582/7 "2020-04-22T22:20:14Z")

</div>

Ok Thank you ☹

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:58pm UTC](https://forum.freecodecamp.org/t/css-problem-body-width/376582/8 "2021-06-01T18:58:00Z")

</div>

Closed on June 1, 2021, 6:58pm UTC