Tips for repairing the gray margins on the right and left sides of a webpage

Currently utilizing Bootstrap 5 and incorporating columns within the framework. However, encountering an issue where there is black space on the right side of the screen and certain content disappearing on the left side as demonstrated here. Here is the code snippet:

<div id="skills">        
        <div id="container">
            <div class="row">
                <div class="row align-items-center">
                    <div class="col align-self-center">
                        <img height="50%" width="50%" src="./images/frontend.png" alt="frontend img">
                        <h2>Frontend Development</h1>
                        <p>Utilizing basic html, css, and js skills to craft frontend websites with subtle animations.</p>
                    </div>
                    <div class="col align-self-center">
                        <img height="50%" width="50%" src="./images/full-stack-developer-icon.png" alt="fullstack img">
                        <h2>Full Stack Development</h2>
                        <p>Leveraging frontend and backend expertise to create comprehensive sites suitable for a wide range of users.</p>
                    </div>
                    <div class="col align-self-center">
                        <img height="50%" width="50%" src="./images/backend.png" alt="backend img">
                        <h2>Backend development</h2>
                        <p>Implementing Node.js and express.js for backend site development, requiring frontend files for integration.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

#skills p {
    font-family: "Dancing Script", sans-serif;
    font-weight: bold;
    font-size: larger;
}

#skills h2{
    font-family: "Solitreo", sans-serif;
}

Attempted solution: Adjusting margins without success.

Answer №1

It appears there is an unnecessary row included in line 3 of your code

<div id="skills">        
    <div id="container">
            <div class="row align-items-center">
                <div class="col align-self-center">
                    <img height="50%" width="50%" src="./images/frontend.png" alt="frontend img">
                    <h2>Frontend Development</h2>
                    <p>I utilize simple html, css, and js skills to develop frontend websites, incorporating subtle animations.</p>
                </div>
                <div class="col align-self-center">
                    <img height="50%" width="50%" src="./images/full-stack-developer-icon.png" alt="fullstack img">
                    <h2>Full Stack Development</h2>
                    <p>Combining frontend and backend expertise to create comprehensive websites. Recommended for a wide range of users.</p>
                </div>
                <div class="col align-self-center">
                    <img height="50%" width="50%" src="./images/backend.png" alt="backend img">
                    <h2>Backend Development</h2>
                    <p>Utilizing Node.js and express.js to develop the backend of your website. Requires frontend files to function properly.</p>
                </div>
            </div>
        </div>
    </div>

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

Methods to fill a data table cell

I have recently created a table and I am facing an issue in populating the tds cells using JavaScript. The data for the table is coming from the server. Here's my table: <table id="report" class="infoRecurso" id='testExportId' style="wid ...

What is the most effective way to showcase the value of a field nested within an object?

I am struggling to frame my question correctly and finding the right information on Google. Therefore, I will provide a simple example instead. If you can assist me by answering my question or guiding me in the right direction, I would greatly appreciate i ...

Displaying data on View is not working after navigation

I'm facing an issue where the data is not displaying on the view after routing, even though it appears in the console. Surprisingly, if I don't change the view, the data shows up. Additionally, if I call the service directly from the view, I can ...

Utilize a JavaScript variable within HTML within the confines of an if statement

On my HTML page, I am dynamically displaying a list of properties and then counting how many are displayed in each div. <script type="text/javascript> var numItems = $('.countdiv').length; </script> The class name for each property ...

Achieving nested classes in CSS: a comprehensive guide

I am encountering an issue with my CSS while trying to create a dropdown on hover. The problem seems to be related to nested classes inside a div structure. It appears that the dropdown list is not displaying properly, leading me to believe there might be ...

Create a small circle in the bottom left corner with a constrained size

I'm trying to create a circle at the top of the screen on mobile, similar to the image below. The circle should take up a percentage of space, with the rest of the content appearing against a blue background as shown in the image. However, I'm h ...

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

When the routes are multiple levels, such as http://www.example.com/profile/view, the RequireJS is failing to resolve dependencies properly. However, if the route is just http://www.example.com/view, the controller dependency is resolved correctly. Below ...

"Experimenting with KinectJS: Adding Rotation to a Pair of Images

Looking for a solution to rotate both the upper arm and forearm images simultaneously? The upper arm rotates around a specific point, and the forearm also rotates around this same point. How can I make sure that the forearm rotates when the upper arm does ...

Position the caret beneath the anchor text

<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none"> <span class="criteria">any</span> <span class="caret" style="margin-top:6px;"></span> </a> The code snippet above ...

I keep receiving an error in Angular JS but I'm unsure of the reason

I've been working on AngularJS and created a basic module and controller. I'm attempting to show the data of an element inside the controller on the HTML view page, but all I see is {{student.name}} and I'm receiving an error message that sa ...

Determining whether a mouse click occurred in the left or right side of a DIV element

Is there a way to determine whether a mouse click occurred on the left or right side of a div element? I'm curious about calculating this: $("div").click(function(e){ // code to calculate left or right half }); <div>Content that can change&l ...

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

I attempted to replicate the design shown in the image below: https://i.sstatic.net/Q7sTI.png Initially, I was successful in achieving this using JavaScript. However, when attempting to recreate the same effect using only CSS without any JavaScript, I en ...

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

When working with CSS, it becomes evident fairly quickly that certain styles are not universally compatible across different browsers. For instance, achieving a semi-transparent PNG required a convoluted solution for Internet Explorer like: filter: pro ...

Dynamic background image changes when checkbox is selected

Greetings! I am a newcomer to the stackoverflow community and I am facing an issue with dynamically changing the background image of my webpage when a checkbox is checked. Here is the HTML code snippet: <ul> <li><label for="Lines">A ...

Incorporating HTML into the Ajax Response

I recently encountered a strange issue with a service that returns an HTML page as the AJAX response. This page contains a form that is automatically triggered by scripts within the page, resulting in a POST request being sent when the page is rendered. My ...

What is the process for storing form data into a text file?

Despite seeing similar questions in the past, I am determined to get to the bottom of why this code isn't functioning as expected. My goal is to input form data into a .txt file using a post request. While I lack extensive knowledge of PHP, I am pieci ...

The CSS background shadow on one div behaves differently compared to the neighboring div

Currently, I am facing an issue where I have two divs positioned next to each other in a line. http://jsfiddle.net/A5Jc7/60/ The HTML structure is as follows: <div> <div class="box1"></div> <div class="box2"></div> ...

Learn how to create a responsive flickr embedded video with Bootstrap!

I'm struggling to make the embedded video responsive. I attempted the solution mentioned in a Stack Overflow post but it didn't work for me. The video's width remains the same and doesn't scale down properly, appearing out of bounds on ...

Responsive left and right image styling in CSS and HTML

I have designed a landing page with fixed left and right images and content in the middle. It looks fine on desktop view, but on mobile view, the images are overlapping the content. How can I resolve this issue? <div class=" ...

Add some pizzazz to your design using jQuery!

I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...