# CMS for Devs Practicum: 1100px wide? **URL:** \ **Category:** CMS Development\ **Tags:** css\ **Created:** [October 21, 2019, 2:34pm UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846 "2019-10-21T14:34:37Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![javlib](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/javlib/32/9373_2.png) [@javlib](https://community.hubspot.com/u/javlib)\ **Post date:** [October 21, 2019, 2:34pm UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/1 "2019-10-21T14:34:37Z")
One of the practicum requirements is: “All content must be centered and 1100 pixels wide on large screens.” What do you mean with that? body{width:1100px} when the screen is wider than 900px would be okay? ---
**Author:** ![cbarley10](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley10/32/50727_2.png) [@cbarley10](https://community.hubspot.com/u/cbarley10)\ **Post date:** [October 22, 2019, 3:34am UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/2 "2019-10-22T03:34:43Z")
Hi @javlib , It means that the content should be no wider than 1100px on desktop screens and should be centered. So the best way to do that would be to add a class to the main group of the body of your template, then give that class some styles so that you can use that class again if need be: ```auto .my-class { max-width: 1100px; float: none; margin: 0 auto; } ``` Then you could use a media query if needed on smaller screens. You’d want to make sure to use the **max-width** property, as **width** would simply hard-code the width of your content to 1100px which would not be mobile responsive. ---
**Author:** ![javlib](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/javlib/32/9373_2.png) [@javlib](https://community.hubspot.com/u/javlib)\ **Post date:** [October 23, 2019, 10:58am UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/3 "2019-10-23T10:58:15Z")
Okay so I used your solution for the template body width, but now I have another problem I tried to solve in so many ways I don’t know what to do anymore. Everything in the body group of modules seems to be perpetually alinged to the left side of the screen, and I just can’t fix it. ![Captura.PNG.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/5/a57426e935bf01f407f07f52f256320a7a264580.jpeg) ![Captura2.PNG.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/8/88403c4c1e259b4cb2f0aa15d0df21bcec741525.jpeg) As you can see, this problem does not affect the footer nor header, and I don’t know what else I can do to solve it. I need the body aligned with the title and the menus. ---
**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\ **Post date:** [October 23, 2019, 12:15pm UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/4 "2019-10-23T12:15:24Z")
can you give us a preview link? ---
**Author:** ![javlib](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/javlib/32/9373_2.png) [@javlib](https://community.hubspot.com/u/javlib)\ **Post date:** [October 24, 2019, 8:58am UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/5 "2019-10-24T08:58:54Z")
[https://app.hubspot.com/design-previewer/6519322/templates/18176949337](https://app.hubspot.com/design-previewer/6519322/templates/18176949337) I don’t know if this is the link you’re asking for (new at hs, sorry). ---
**Author:** ![cbarley10](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley10/32/50727_2.png) [@cbarley10](https://community.hubspot.com/u/cbarley10)\ **Post date:** [October 24, 2019, 1:35pm UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/6 "2019-10-24T13:35:53Z")
Hey @javlib , you’d need to send the preview of your template, which means you should click “preview without display options”. > **[Screenshot](https://prnt.sc/pnkn1q)** > > Captured with Lightshot ---
**Author:** ![javlib](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/javlib/32/9373_2.png) [@javlib](https://community.hubspot.com/u/javlib)\ **Post date:** [October 24, 2019, 2:07pm UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/7 "2019-10-24T14:07:39Z")
Okay so here it is [https://preview.hs-sites.com/\_hcms/preview/template/multi?is\_buffered\_template\_layout=true&portalId=6519322&tc\_deviceCategory=undefined&template\_layout\_id=18176949337&updated=1571907875863](https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=6519322&tc_deviceCategory=undefined&template_layout_id=18176949337&updated=1571907875863) ---
**Author:** ![cbarley10](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley10/32/50727_2.png) [@cbarley10](https://community.hubspot.com/u/cbarley10)\ **Post date:** [October 25, 2019, 2:56pm UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/8 "2019-10-25T14:56:05Z")
Hi @javlib , you need to add a max-width of 1100px to the **#container** ID. > **[Screenshot](https://prnt.sc/po39g5)** > > Captured with Lightshot ---
**Author:** ![carrot](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/carrot/32/53869_2.png) [@carrot](https://community.hubspot.com/u/carrot)\ **Post date:** [April 2, 2020, 2:06pm UTC](https://community.hubspot.com/t/cms-for-devs-practicum-1100px-wide/16846/9 "2020-04-02T14:06:10Z")
Hi I am working in CMS template for last one month . I am a non developer. I have seen the preview your template here. Could you please help me out to achieve this ‘leadership’ gallery. Although I have also created custom module for it. but I really need some assistance. Please help me . I am sending you the link of mine one. [http://hubspot-developers-kazbkj-5765658.hs-sites.com/demo-page](http://hubspot-developers-kazbkj-5765658.hs-sites.com/demo-page) Thanks Monika