I'm having trouble with the margin-right property in my HTML code. What's the best way to align my content

Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases.

The issue is as follows:

@media screen and (min-width: 950px) {
    body {
        margin: 10%;
    }
}

Setting the margin to 10% results in only the margin-top and margin-left working properly. Unfortunately, this is not the desired outcome as the margin-right doesn't function at all.

Below is a visual representation of the problem:

With that said, does anyone know how I can rectify this issue?

htmlcssresponsive-design

Answer №1

The reason this issue is occurring is due to the lack of proper width settings for the body. When margins are specified, the margin-left property comes into play and shifts the content out of view.

To ensure that the total width including margins adds up to 100%, you should set a 80% width with 10% margins on each side.

@media screen and (min-width: 950px) {
    html {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body{
        width: 80%;
        margin: 10%;
        padding: 0;
    }
}

Alternatively, you can opt for auto-adjustment like so:

body {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

Answer №2

To customize your layout, you have the option to utilize the CSS property position: relative;.

@media screen and (min-width: 950px) {
body {
 position: relative;
 top: 0%;
 bottom: 0%;
 right: 10%;
 left: 0%;
 }
}

You can also specify values in pixels such as 50px;

Answer №3

Here is a concise response for you: 

 body{margin: 0;}
.wrapper{width: 80%; margin: 0 auto;}
.wrapper img{max-width: 100%}
<div class="wrapper">
  <img src="https://images3.alphacoders.com/278/27807.jpg" />
</div>

Answer №4

By default, images are considered as inline level elements. To ensure proper functioning of your images and margins, you should add display:block; to your CSS.

img { display: block; }

Answer №5

After setting the parent div's style to "float: right," I was able to solve the positioning issue. Inside the parent element, I only included the content that required alignment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for embedding a swf file in HTML and linking it to a different page

I've employed the following code snippet to embed my SWF file and redirect it to another page upon clicking: <object type="application/x-shockwave-flash" onmouseup="document.location='http://www.pageopensafterclick.com'" height=50 width= ...

html

Issues with message display validation in jQuery

Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs. The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the ...

javascriptjqueryhtmlcssjquery-validate

Stylish Tabbed Design

Imagine I have this html and css snippet h1{ color: rgb(61, 133, 200); font-size: 3em; margin-left: 0px !important; } h1 ~ *:not(h1) { margin-left: 0px; } h2{ font-size: 1.8em; margin-left: 40px !important; } h2 ~ *:not(h2) { ...

htmlcsslayout

What is the best way to target elements that have the contentEditable attribute set to true using CSS?

Can someone help me style table cells that have contentEditable set to "true"? I've tried various CSS selectors like td[contenteditable], td[contenteditable=true], and td[contenteditable="true"], but none seem to work. Is there a specific selector for ...

htmlcss

Tips for showing various images from a server using ng-repeat

Is it possible to display different images from a server using AngularJS? I have ng-repeat set up for posts and for each post, I want to retrieve its avatar. My approach is to call a function getImage(post.author.id) to fetch the corresponding avatar. $ ...

javascriptangularjshtmlcordova

Dropdown menu similar to the one utilized in Bootstrap

I am curious to understand how the drop-down menu system in Bootstrap3's tutorial page operates. It seems that it collapses all subtopics under a main topic by default, allowing users to either click or scroll to expand further. Additionally, the menu ...

csstwitter-bootstrapdrop-down-menu

Configuring a background logo in WordPress using the Redux framework

I am attempting to integrate a "Logo upload" theme option using Redux framework, but I encountered an issue due to the logo being set up through a stylesheet in my HTML template. How can I configure this logo using an uploader? As a newcomer to WordPress a ...

phpcsswordpressframeworksredux-framework

Absence of MVC5 Vanilla Layouts

Creating my first MVC5/Razor application from the ground up, I want to avoid including unnecessary references that cause bloat. In the Views folder, I have separate Home and Shared subfolders. The Home folder contains Index.cshtml, while the Shared folder ...

cssasp.net-mvcrazor

Merging Two Angular Pages within a Jhipster Application

My jhipster application is simple, generating 2 entities: Product and Category. The generated pages to list the data for these entities can be found here. Specifically, there are pages for Product and Category. If I want to create a new page that combines ...

javascripthtmlangularjsjhipster

Traverse div elements using jQuery and showcase the text within them

I've got a setup like the one below. I want to use jQuery to grab each link and display its href right below it. Instead of writing code for each div individually, I'm looking for a solution that works for all divs with the 'col' class, ...

javascriptjqueryhtmlcss

The positioning problem arising from using a Vuetify select dropdown within a datatable

Vuetify datatable is being used with 20 columns, functioning properly. To view all the columns, horizontal scrolling is available. Filters are needed for each column in the header, achieved using v-slot:header. An issue arises when clicking on the select ...

cssvue.jsvuetify.js

Flexbox's bootstrap columns display issue on smaller screens with no wrapping

I am currently working on a section of my website where I have applied some CSS to 2 divs and an anchor tag in order to center the content vertically. However, I am facing an issue with the flex style properties when the window size is less than 768px. In ...

csshtmltwitter-bootstrapflexbox

Initiating the form with a query mark

Recently, I found myself in a disagreement with a colleague over the validity of a certain URL: <form action="?foo=bar" method="get"> According to him, using this URL can lead to troubles as the browser may struggle to correctly redirect to the int ...

htmlformsurl

Having difficulties with Cypress test for dragging and dropping an element within the same area

I am experimenting with the drag and drop feature using a plugin called 4teamwork/cypress-drag-drop. I have a scenario where there are three elements stacked on top of each other. The task is to select the first element and move it under the last element i ...

htmlreactjscypress

Is there a way to showcase an epub format book using only HTML5, CSS, and jQuery?

Can ePub format books be displayed in a web browser using only HTML5, CSS, and jQuery? I would appreciate any suggestions on how to accomplish this. Additionally, it needs to be responsive so that it can work on iPad. While I am aware of this requirement, ...

javascriptjqueryhtmlcssepub

"I am facing an issue where the button does not appear centered after using jQuery

I can't help but notice that when applying CSS directly, my buttons end up centered horizontally. Yet, when I insert the same code using append(), the buttons seem to align towards one side instead. Here is the HTML/CSS code snippet: <div style=" ...

jquerycssappend

Troubleshooting: Issues with Mod_rewrite affecting CSS, JS, and Image functionality

Today marks my first time posting a query in this forum. I'm currently facing an issue with mod_rewrite. Below is the structure of my filesystem: site_new/stylesheets/layout.css site_new/javascript/somescript.js site_new/hallendetails.php ...

cssapache.htaccessmod-rewriteurl-rewriting

What is the best way to position elements at the top and bottom of a container?

I'm struggling to align one of the elements in my container to the top while using flexbox. All elements are currently aligned to the bottom, but I want a specific text to be at the top of the container. jQuery(document).ready(function($) { ...

htmlcssflexbox

Exploring Style Attribute Manipulation using vanilla JavaScript on Firefox

I searched for a similar question, but I couldn't find anything quite like it. I'm currently developing a JavaScript Slider plugin for various projects within our company. This requires me to manipulate styles on certain elements in the DOM. I&a ...

javascriptcssfirefoxstylesnative

Create a distinct CSS animation 'origin' declaration for every <g> element

I am using CSS animation to apply a 'wobble' effect to each letter within a word. The letters are represented by SVG groups <g>. However, in the provided example, the wobbling effect becomes more pronounced with each subsequent letter, wher ...

cssanimationsass